本文共 481 字，大约阅读时间需要 1 分钟。

(padding-bottom实现的正方形)

这个方法非常巧妙。由于padding-bottom的属性值百分比是按照父容器的宽度来计算的，所以我们可以设置容器的宽度为父容器的50%，padding-bottom也为50%。这样，无论是宽度还是高度，都会自动占用父容器的50%。这样一来，盒子就会显示成一个完美的正方形。

2. 使用隐藏图片实现

这种方法无需担心兼容性问题，在PC和移动端都能完美运行。只是增加了一个DOM结构，但相比于一个页面中百上千的代码，这个成本微乎其微。

我们知道，div容器如果不设置高度，其高度会随着内部元素的变化而自动扩展。在这种情况下，我们在容器内部添加一张图片，并设置图片的宽度为100%，高度为auto。这样，无论父容器如何变化，图片都会严格按照宽高比例自动缩放，内部容器的高度也会随之调整。

相比于padding-bottom实现，使用图片可能会存在一定的高度误差，这需要根据实际需求进行调整。

使用图片实现的优势在于代码简洁，不需要额外处理。对于大多数浏览器和屏幕尺寸，这种方法都能达到理想效果。

转载地址：http://zqvq.baihongyu.com/