アスペクト比を維持しながら HTML で画像のサイズを変更するにはどうすればよいですか?

画像のサイズ変更中にアスペクト比を維持する

画像を操作する場合、画像が正しく表示されるようにアスペクト比を維持することが重要です。ただし、HTML で幅と高さの両方の属性を指定すると、歪みが生じることがよくあります。

次の HTML コードを検討してください:

<img src="big_image.jpg" width="900" height="600" alt="" />

アスペクト比を維持しながら画像のサイズを変更するには、次の CSS を適用します。ルール:

img {
    display: block;
    max-width: 500px;
}

表示: ブロック;プロパティを使用すると、画像がブロック要素のように動作し、コンテナの幅を満たすことができるようになります。 max-width プロパティは、画像の最大幅を設定し、高さを維持しながらその幅を超えないようにします。

この CSS は次の HTML にも適用されます:

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.sstatic.net/aEEkn.png" />

このアプローチを使用すると、指定された最大幅を守りながら、アスペクト比を維持しながら、異なる寸法の画像が比例してサイズ変更されます。

以上がアスペクト比を維持しながら HTML で画像のサイズを変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。