css - 根据高度保持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%;
}

确保盒子的纵横比根据它的高度保持不变。高度是可变的，因为它是 % margin - 随着窗口高度的变化，盒子的高度也会随之变化。

我知道如何使用 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 的大小都是一样的。