如何僅使用 CSS 來保持元素長寬比？

使用CSS 保留元素寬高比：高度的最小寬度

設定元素的最小寬度以匹配其高度可能是一個挑戰。高度沒有明確定義時。雖然使用 jQuery 提供了一個解決方案，但可以直接在 CSS 中實現此行為。

要保持縱橫比，請利用「替換元素」概念。圖像 () 就是一個典型的例子。透過設定其高度，保留固有的寬高比，自動調整寬度以符合。

實作CSS解決方案

建立一個具有所需任意值的「容器」輸入高度並將其位置設為「相對」。在容器內加入高度為 100% 的影像。這會自動按比例設定影像的寬度。

嵌套一個具有絕對定位的「內容」元素，以佔據整個容器的空間而不影響其尺寸。

寬高比控制

要調整縱橫比，請改變影像的高度。例如，4:3 的比例需要將影像的高度設定為 133%。

其他注意事項

解決方案中使用的透明 1x1 px gif 可以替換為其他元素，例如畫布或 SVG。如果原始影像沒有 1:1 的寬高比，則需要調整高度值。

依照寬度設定元素高度，請參閱「使用 CSS 維護 Div 的寬高比」資源。

以上是如何僅使用 CSS 來保持元素長寬比？的詳細內容。更多資訊請關注PHP中文網其他相關文章！