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

  • Z时代
  • 2024-01-10
  • 分类：问答

我所拥有的是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的长宽比）

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

亚伦

回答：

由于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>

以上是 如何在保持宽高比的同时使用CSS自动调整DIV的大小？ 的全部内容， 来源链接： utcz.com/qa/406116.html

回到顶部