如何用 CSS 创建响应式方形 Div？

如何使用 CSS 创建响应式方形 Div？

之前问过，这个问题寻求一种动态改变 div 高度以匹配其宽度的方法。宽度以百分比表示，因此当父元素的宽度减小时，div 应该按比例缩小。

为了解决这个问题，我们可以使用 CSS 的 padding-bottom 属性。通过将 padding-bottom 设置为百分比，我们可以创建 div 的高度和宽度之间的比率，确保它们保持相等。

以下是代码示例：

<div>

在此在代码中，外部 div 使用 width: 20% 和 height: 0 建立了一个正方形。20% 的 padding-bottom 设置了高度和宽度之间的比率，从而产生 1:1 的纵横比。内部 div 包含实际内容。

此外，还提供了 JavaScript Fiddle 演示来展示其功能：[Fiddle 链接]

以上是如何用 CSS 创建响应式方形 Div？的详细内容。更多信息请关注PHP中文网其他相关文章！