在 CSS 流體佈局中動態匹配高度和寬度
在流體 CSS 佈局中,元素可以根據可用空間自動調整其大小。當嘗試保持特定的寬高比(例如正方形或矩形)時,這可能會帶來挑戰。
問題:
CSS 可以用來設定高度元素與其寬度相同,維持 1:1 的寬高比比率?
範例:
考慮具有以下結構的容器元素和巢狀 div元素,版面:
+----------+ | body | | 1:3 | | | | +------+ | | | div | | | | 1:1 | | | +------+ | | | | | | | | | | | +----------+
CSS:
div { width: 80%; height: same-as-width }
解:
解:#container { display: inline-block; position: relative; width: 50%; } #dummy { margin-top: 75%; /* 4:3 aspect ratio */ } #element { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: silver/* show me! */ }
<div>
雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度明確>雖然不能設定高度清楚地僅使用CSS來匹配寬度,可以使用虛擬元素和巧妙的方法來實現解決方法
透過使用虛擬元素上的margin-top 屬性並將其設定為75%(以符合4: 3 的寬高比),我們創造高度的參考。然後,該元素絕對定位在該參考區域內,導致高度等於其寬度。以上是CSS 能否透過動態匹配元素高度和寬度來保持 1:1 的縱橫比?的詳細內容。更多資訊請關注PHP中文網其他相關文章!