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

アスペクト比を維持しながら画像のサイズを強制的に変更する

画像を操作する場合、多くの場合、画像を特定のサイズにサイズ変更する必要があります。ただし、アスペクト比を維持すると、画像が歪んだり引き伸ばされたりすることがなくなります。

初期試行:

最初は、指定された寸法とカスタム CSS ルールがサイズ変更に使用されました。画像は表示されますが、アスペクト比は異なります維持:

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

img {
  max-width: 500px;
}

解決策:

アスペクト比を維持しながら画像のサイズを強制的に変更するには、次の CSS プロパティを使用できます:

• display: block;: 画像がページ内に流れるようにしますcontent.
• max-width:230px;: 画像の最大幅を設定します。
• max-height:95px;: 画像の最大高さを設定します。
• width: auto;: 最大幅と最大高さの制約内で利用可能なスペースを画像が自動的に埋めることができます。
• 高さ: auto;: 画像固有のアスペクト比に基づいて高さを自動的に調整します。

結果:

これらの CSS ルールを画像に適用します:

<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">

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

元の縦横比を維持しながら、指定された最大寸法内でサイズ変更された画像が生成されます。比率。

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