根据高度保持div长宽比

Question

我需要将元素的 宽度 保持为 高度 的百分比。因此，随着高度的变化，宽度也会更新。

通过为padding-top使用％值可以实现相反的效果，但以padding-left为百分比将是对象宽度的百分比，而不是其高度。

因此，使用这样的标记：

<div class="box">
  <div class="inner"></div>
</div>

我想使用这样的东西：

.box {
    position: absolute;
    margin-top: 50%;
    bottom: 0;
}
.inner {
    padding-left: 200%;
}

为了确保根据盒子 的高度保持 盒子的 长宽比 。高度是可变的，因为它的百分比裕度-当窗口的高度改变时，盒子的高度也会改变。

我知道如何使用JavaScript来实现这一点，只是想知道是否有一个干净的纯CSS解决方案？

Answer 1

您可以使用具有所需比例的图像来帮助按比例调整大小（可以通过将一维设置为某个值，另一维设置为“自动”来按比例缩放图像）。图像不必是可见的，但必须占用空间。

.box {

  position: absolute;

  bottom: 0;

  left: 0;

  height: 50%;

}

.size-helper {

  display: block;

  width: auto;

  height: 100%;

}

.inner {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background: rgba(255, 255, 153, .8);

}


<div class="box">

  <img class="size-helper" src="//dummyimage.com/200x100/999/000" width="200" height="100">

  <div class="inner">

    1. box has fluid height<br>

    2. img has 2:1 aspect ratio, 100% height, auto width, static position<br>

    2.1 it thus maintains width = 200% of height<br>

    2.2 it defines the dimensions of the box<br>

    3. inner expands as much as box

  </div>

</div>

在上面的示例中，box，inner和helper的大小都相同。