如何在 CSS 中建立響應式方形 Div？

建立一個響應式的方形Div

問題：

如何在CSS 中設計一個div 元素來保持正方形的縱橫比，並在父元素調整大小時按比例調整其高度？

答案：

有一個簡單的技術可以使用填充來實現此目的：

1. 將 div 的高度設定為 0。這會「欺騙」瀏覽器使高度變得靈活。
2. 將 div 的寬度定義為百分比。
3. 將 padding-bottom 設定為與寬度相同的百分比。這會強制瀏覽器調整高度以保持正方形的長寬比。

這是一個程式碼範例：

<div>

最外面的 div 建立正方形形狀，而內部 div 建立正方形形狀包含實際內容。當父元素的寬度改變時，這種方法有效地保持了正方形的縱橫比。它與大多數瀏覽器相容。

可以在 jsfiddle 上找到一個實例：[在此處插入 jsfiddle 連結]

以上是如何在 CSS 中建立響應式方形 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！