同时保持宽高比如何自动调整大小与CSS一个DIV？(How to Auto-Resize a DIV

我有的是在HTML标准形式，其允许用户选择“宽度”选项和“高度”选项（每个具有值范围从1到10）。当它们发送的形式，将其发送到一个PHP / HTML页面，PHP抓住“宽度”和“高度”的变量并将其分配给一个DIV的宽度和高度。

但是我想要做的就是使用“宽度”和“高度”变量指定的长宽比该DIV，然后有一个DIV自动调整到它里面的容器的100％，但同时保持同的纵横比。

例如：用户选择的4的宽度和2的高度，然后发送形式。在接收PHP页面，即DIV（所述一个接收的宽度和高度的比率）是一个容器这是1000像素宽和600像素高度的内部。所以，现在，即DIV调整大小以1000像素宽和500像素高（这将是4〜2的纵横比）

任何想法，代码，脚本会非常有帮助，非常感谢你！

亚伦

Answer 1:

由于百分比值padding-*性能相对于计算生成框的包含块的宽度，您可以：

添加一个虚设元件与没有内容，但在垂直填充（百分比padding-top或padding-bottom ），对应于所希望的纵横比。
使用绝对定位，从要素的正常流动删除所有内容，以防止它们增加高度。然后，使之成长为填充容器。

这个想法是取自http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio

 #container { position: relative; width: 50%; } #dummy { padding-top: 75%; /* 4:3 aspect ratio */ } #element { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: silver; }

 <div id="container"> <div id="dummy"></div> <div id="element"> some text </div> </div>

注意垂直边距可以用来代替垂直填补，但随后会有保证金崩溃。为了防止这种情况，加

#container {
  display: inline-block;
}

 #container { display: inline-block; position: relative; width: 50%; } #dummy { margin-top: 75%; /* 4:3 aspect ratio */ } #element { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: silver; }

 <div id="container"> <div id="dummy"></div> <div id="element"> some text </div> </div>

使用::before伪元素，就没有必要使用一个虚设的元素：

#container:before {
  padding-top: 75%; /* 4:3 aspect ratio */
  content: ''; /* Enable the pseudo-element */
  display: block;    
}

 #container { position: relative; width: 50%; } #container:before { padding-top: 75%; /* 4:3 aspect ratio */ content: ''; /* Enable the pseudo-element */ display: block; } #element { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: silver; }

 <div id="container"> <div id="element"> some text </div> </div>

Answer 2:

你可以采取的替换元件可能具有固有的高宽比的事实。根据该规范，

否则，如果“高度”具有“自动”所计算的值，和元件的特性比然后“高度”的使用的值是：
（使用的宽度）/（本征比）

因此，你可以

创建具有所需特性比的替换元件，然后设置width:100%到它。
使用绝对定位，从要素的正常流动删除所有内容，以防止它们增加高度。然后，使之成长为填充容器。

然后，容器容器将有你想要的纵横比。

被替换的元素可以是一个图像。你可以在PHP创建所需的宽高比的图像，或者使用第三方的Web服务一样http://placehold.it/

在下面的代码段中，我使用2px的宽度和高度1px的图像（）：

 .container { border: 3px solid blue; position: relative; } .container > img { width: 100%; display: block; visibility: hidden; } .container > .content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: auto; }

 <div class="container"> <img src="http://i.stack.imgur.com/Lfmr6.png" /> <div class="content"> <p>01</p><p>02</p><p>03</p><p>04</p><p>05</p> <p>06</p><p>07</p><p>08</p><p>09</p><p>10</p> <p>11</p><p>12</p><p>13</p><p>14</p><p>15</p> <p>16</p><p>17</p><p>18</p><p>19</p><p>20</p> </div> </div>

还可以使用一个<canvas>元素代替的图像。这样，您就不需要创建图像，但它并没有在旧版浏览器的工作（如IE 8或更早）：

<div class="container">
  <canvas height="1" width="2"></canvas>
  <div class="content">...</div>
</div>

 .container { border: 3px solid blue; position: relative; } .container > canvas { width: 100%; display: block; visibility: hidden; } .container > .content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: auto; }

 <div class="container"> <canvas height="1" width="2"></canvas> <div class="content"> <p>01</p><p>02</p><p>03</p><p>04</p><p>05</p> <p>06</p><p>07</p><p>08</p><p>09</p><p>10</p> <p>11</p><p>12</p><p>13</p><p>14</p><p>15</p> <p>16</p><p>17</p><p>18</p><p>19</p><p>20</p> </div> </div>

文章来源: How to Auto-Resize a DIV with CSS while keeping Aspect Ratio?