CSS を使用して要素の最小幅を動的高さと同じにする方法は?

CSS 経由で高さに基づいて要素の幅を設定する

問題:

どうすれば確認できますか高さを明示的に設定せずに、要素の最小幅がその高さに等しいということですか?これは、高さが動的で事前に設定できない場合に特に便利です。

考えられる解決策:

1. jQuery のアプローチ:

jQuery を使用すると、要素の最小幅を現在の高さに一致するように設定できます:

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

2。 CSS のみのアプローチ (アスペクト比のトリック):

驚くべきことに、JavaScript を使用せずに 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;
}

要素は、その固有のアスペクト比 1:1 を維持するために、その幅を自動的に拡大縮小します。これは、 の幅が 1 であることを意味します。そしてそれに含まれる要素 () は常にコンテナの高さと同じになります。

カスタマイズ:

アスペクト比をカスタマイズするには、 の高さ要素。たとえば、4:3 のアスペクト比を作成するには、

ライブデモ:

https://jsbin.com/koyuxuh/edit

代替方法 (キャンバス)または SVG):

も使用できますまたは の代わりに要素を使用します。アスペクト比の動作を作成します。原則は変わりません。

以上がCSS を使用して要素の最小幅を動的高さと同じにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。