相关疑难解决方法(0)

我想创建一个div可以随着窗口宽度的变化而改变宽度/高度的东西.

是否有任何CSS3规则允许高度根据宽度改变,同时保持其宽高比？

我知道我可以通过JavaScript实现这一点,但我更喜欢只使用CSS.

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

相反的情况可以通过使用填充顶部的%值来实现,但填充左边的百分比将是对象宽度的百分比,而不是其高度.

所以使用这样的标记:

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

我想用这样的东西:

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

确保根据箱子的高度保持箱子的纵横比.高度是流动的,因为它的边距百分比 - 随着窗户高度的变化,盒子的高度也会变高.

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