CSS のみを使用して要素のアスペクト比を維持するにはどうすればよいですか?

CSS による要素の縦横比の維持: 高さからの最小幅

要素の高さに合わせて要素の最小幅を設定するのは難しい場合があります高さが明示的に定義されていない場合。 jQuery を使用すると解決策が提供されますが、この動作を CSS で直接実現することも可能です。

アスペクト比を維持するには、「要素の置換」の概念を活用します。画像 () がその代表的な例です。高さを設定すると、固有のアスペクト比が維持され、それに合わせて幅が自動的に調整されます。

CSS ソリューションの実装

必要な任意の値を含む「コンテナ」を作成します。高さを入力し、その位置を「相対」に設定します。コンテナ内に、高さ 100% の画像を追加します。これにより、画像の幅が比例して自動的に設定されます。

寸法に影響を与えることなくコンテナのスペース全体を占有するように、絶対位置を指定して「contents」要素をネストします。

アスペクト比の制御

アスペクト比を調整するには、画像の高さを変更します。たとえば、4:3 の比率では、画像の高さを 133% に設定する必要があります。

追加の考慮事項

ソリューションで使用されている透明な 1x1 ピクセルの gif は、次のように置き換えることができます。キャンバスや SVG などの他の要素。元の画像のアスペクト比が 1:1 でない場合は、高さの値を調整する必要があります。

幅に基づいて要素の高さを設定する場合は、「CSS を使用して Div のアスペクト比を維持する」を参照してください。リソース。

以上がCSS のみを使用して要素のアスペクト比を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。