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

小编典典

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

css

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

但是我想做的只是使用“ Width”和“
Height”变量来给该DIV分配一个长宽比，然后让该DIV自动调整为其内部容器的100％，但同时保持相同的长宽比。

示例：
用户选择宽度4和高度2，然后发送表格。在接收PHP页面上，那个DIV（一个接收宽度和高度比率的数字）位于一个容器中，该容器的宽度为1000px，高度为600px。所以现在，该DIV的大小调整为1000像素宽和500像素高（那是4到2的长宽比）

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

亚伦

阅读 431

2020-05-16

共1个答案

小编典典

由于padding-*属性的百分比值是根据生成的框的包含块的宽度计算的，因此您可以：

添加一个虚拟元素，该元素不包含任何内容，但在垂直填充（padding-top或padding-bottom）中包含一个百分比，对应于所需的宽高比。
使用绝对定位可以从元素的正常流中删除所有内容，以防止它们增加高度。然后，使其生长以填充容器。

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;

}
```
some text
```

注意可以使用垂直边距代替垂直填充，但是会出现边距崩溃。为了防止这种情况，请添加

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

2020-05-16