如何将div设置为响应正方形？

Question

我希望我的div调整其高度以使其始终等于其宽度。宽度为百分比。当父母的宽度减小时，盒子应通过保持其纵横比减小。

CSS是怎么做到的？

Answer 1

要实现所需的功能，可以使用viewport-percentagelength vw。

这是我在jsfiddle上制作的一个简单示例。

HTML：

<div class="square">
    <h1>This is a Square</h1>
</div>

CSS：

.square {
    background: #000;
    width: 50vw;
    height: 50vw;
}
.square h1 {
    color: #fff;
}

我敢肯定还有很多其他方法可以做到这一点，但是这种方法对我来说似乎是最好的。