如何使用 CSS 使元素的最小寬度等於其動態高度？

透過CSS 依照高度設定元素寬度

問題：

問題：

如何確保元素的最小元素寬度等於其高度，而不明確設定高度？當高度是動態的並且無法預先設定時，這特別有用。

可能的解決方案：

1。 jQuery 方法：

$(document).ready(function() {
    $('.myClass').each(function() {
        $(this).css('min-width', $(this).css('height'));
    });
});

使用jQuery，您可以設定元素的最小寬度以符合其目前高度：

2.僅CSS 方法（長寬比技巧）：

.container {
    position: relative;
    display: inline-block;
    height: 50vh; /* Adjust this based on desired height */
}

.container > img {
    height: 100%; /* Inherits container's height */
}

.contents {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

令人驚訝的是，無需JavaScript 即可直接在CSS 中實現所需的行為。關鍵是使用 元素：

元素將自動縮放其寬度以保持其固有的縱橫比 1:1。這意味著 的寬度並且它包含的元素 () 將始終等於容器的高度。

自訂：

要自訂寬高比，請調整 的高度元素。例如，要建立 4:3 的寬高比，請將 設定為高度調整為 133%。

現場示範：

https://jsbin.com/koyuxuh/edit

替代方法（畫布或SVG）：您也可以使用或建立縱橫比行為。原則保持不變。

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