如何在保持宽高比的同时使用CSS自动调整DIV大小？

Question

我所拥有的是HTML中的标准表单，允许用户选择“宽度”选项和“高度”选项（每个选项的值范围为1到10）。当他们发送表单时，它会将其发送到PHP / HTML页面，其中PHP抓取“宽度”和“高度”变量并将其分配给DIV的宽度和高度。

但是我要做的只是使用“宽度”和“高度”变量为该DIV指定宽高比，然后让DIV自动调整为其内部容器的100％，但保持相同的宽高比。

示例： 用户选择宽度4和高度2，然后发送表格。在接收PHP页面上，DIV（接收宽度和高度比率的那个）位于容量为1000px宽度和600px高度的容器内。所以现在，DIV调整到1000px宽和500px高（这将是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

您可以利用替换元素可能具有固有宽高比的事实。 根据{{​​3}}，

  

否则，如果'height'的计算值为'auto'，则为元素   具有固有比率，那么'height'的使用值是：

     

（使用宽度）/（固有比率）

因此，你可以

• 使用所需的固有比率创建替换元素，然后将width:100%设置为它。
• 使用绝对定位从元素的正常流动中移除所有内容，以防止它们增加高度。然后，让它长大以填充容器。

然后，容器容器将具有您想要的宽高比。

替换元素可以是图像。您可以在PHP中创建所需宽高比的图像，或使用第三方Web服务，如spec

在以下代码段中，我使用http://placehold.it/（）：

.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>