如何使用 CSS 使元素的高度動態匹配其寬度？

使用CSS 設定流體高度以匹配動態寬度

建立完美反映寬度的高度可能具有挑戰性，尤其是在工作時具有動態佈局。然而，巧妙的 CSS 技術使我們能夠實現這種 1:1 的比例。

在 CSS 中，「高度」屬性接受各種測量單位，包括「與寬度相同」。不幸的是，目前的 CSS 實作中不存在此值。

幸運的是，已經出現了一種解決方法，利用「display」和「position」屬性以及虛擬元素。此解決方案涉及：

1. 將容器元素設定為「內聯塊」和「相對」定位。
2. 加入具有產生所需方面的 margin-top 值的虛擬元素比率。在此範例中，使用 4:3 的寬高比（頂部邊距為 75%）。
3. 在容器內放置絕對元素以拉伸並填滿整個可用空間。

透過採用這種技術，絕對元素將自動調整其高度以匹配容器的寬度，無論其動態性質如何。虛擬元素用作設定初始縱橫比的佔位符，可以對其進行修改以實現不同的比例。

此解決方案提供了一種乾淨有效的方法來創建具有一致高寬比的動態流體佈局僅使用 CSS。

以上是如何使用 CSS 使元素的高度動態匹配其寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！