CSSで幅または高さを100%に設定しながらアスペクト比を維持するにはどうすればよいですか?

CSS で幅または高さを 100% にしてアスペクト比を維持する

CSS を使用する場合、多くの場合、画像の幅または高さを設定する必要があります。 100%まで。ただし、そうすると画像が歪んでしまう可能性があります。これは、アスペクト比 (画像の幅と高さの比例関係) が維持されていないために発生します。

100% の幅または高さを使用しながらアスペクト比を維持するには、画像のサイズを制約する必要があります。具体的な方法。画像上で 1 つの寸法 (幅または高さ) のみを定義すると、アスペクト比は自動的に維持されます。

ただし、幅と高さの両方を 100% に設定すると、画像が大きすぎる可能性があります。意図した空間。この場合、ニーズに合った最大幅または高さの DIV 内に画像を配置できます。次に、overflow:hidden プロパティを使用して、指定したサイズを超える画像の部分をトリミングできます。

あるいは、max-width プロパティと max-height プロパティを使用して、画像の最大サイズを制御することもできます。画像。最小寸法を定義せずにこれらの値を設定することで、画像が歪まず、指定された最大寸法を超えないことが保証されます。

以上がCSSで幅または高さを100%に設定しながらアスペクト比を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。