如何將 Div 設計為響應式正方形？

將Div 設計為響應式正方形

實現div 元素自動調整其高度以匹配其寬度，同時保持寬高比可以是常見的造型挑戰。以下是詳細的解釋和解決方案：

CSS 方法

要建立響應式方形div，我們可以利用CSS 屬性「padding-bottom」和單位「% 」 」。 CSS 程式碼

這裡是HTML 和完成的CSS程式碼this:

<div>

說明

#square {
  height: 0;
  width: 20%;
  padding-bottom: 20%;
  background-color: red;
}

說明

• 說明
• 說明

說明

說明

說明說明「 height”屬性設為0，允許padding-bottom控制高度。“width”屬性設定為20%，定義了寬度的百分比 div。“padding-bottom”屬性也設定為20%，建立一個方形div。 🎜>相容性此解決方案可在各種瀏覽器上有效運行，包括Firefox、Chrome、Edge 和Safari。

以上是如何將 Div 設計為響應式正方形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！