如何創造等高、等寬的響應式方形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中文網其他相關文章！