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

创建一个响应式的方形 Div

问题：

如何在 CSS 中设计一个 div 元素来保持正方形的纵横比，将其高度与其宽度成比例地调整为父元素调整大小？

答案：

有一个简单的技术可以使用填充来实现此目的：

1. 将 div 的高度设置为 0。这会“欺骗”浏览器使高度变得灵活。
2. 将 div 的宽度定义为百分比。
3. 将 padding-bottom 设置为与宽度相同的百分比。这会强制浏览器调整高度以保持正方形的长宽比。

这是一个代码示例：

<div>

最外面的 div 建立正方形形状，而内部 div 建立正方形形状包含实际内容。当父元素的宽度发生变化时，这种方法有效地保持了正方形的纵横比。它与大多数浏览器兼容。

可以在 jsfiddle 上找到一个实例：[在此处插入 jsfiddle 链接]

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