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

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

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

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

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