如何用 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中文網其他相關文章！