如何创建等高、等宽的响应式方形div？

高度和宽度相等的响应式 Square Div

您的目标是创建一个 div 元素，自动调整其高度以匹配其宽度，无论父元素的大小如何。为了实现这一点，CSS 有一个简单而有效的解决方案：

使用百分比填充底部：

将以下 CSS 添加到您的 div：

height: 0;
width: 20%;
padding-bottom: 20%;
background-color: red;

其工作原理如下：

• 将高度设置为 0，使 div 最初折叠。
• 指定百分比宽度（例如 20%）。
• 将 padding-bottom 设置为与宽度相同的百分比。这决定了 div 的高度。
• 添加背景颜色以使正方形可见。

可选嵌套 Div：

为了使内容放置更加灵活，请考虑在方形 div 内创建嵌套 div。这使您可以根据需要居中或对齐内容。

<div>

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