如何使用 CSS 使元素的最小寬度等於其動態高度？-css教學-PHP中文網

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

Linda Hamilton

發布： 2024-12-26 05:10:11

原創

466 人瀏覽過

How Can I Make an Element's Minimum Width Equal to Its Dynamic Height Using 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 中實現所需的行為。關鍵是使用如何使用 CSS 使元素的最小寬度等於其動態高度？

元素：

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

自訂：

要自訂寬高比，請調整如何使用 CSS 使元素的最小寬度等於其動態高度？的高度元素。例如，要建立 4:3 的寬高比，請將設定為高度調整為 133%。

現場示範：

https://jsbin.com/koyuxuh/edit

替代方法（畫布或SVG）：您也可以使用或

建立縱橫比行為。原則保持不變。

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