☰

画像のサイズを強制的に変更し、アスペクト比を維持するにはどうすればいいですか? 質問する

tag-icon • tag-icon css image aspect-ratio
画像のサイズを強制的に変更し、アスペクト比を維持するにはどうすればいいですか? 質問する

画像を扱っているのですが、アスペクト比に関する問題が発生しました。

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

ご覧のとおり、heightと はwidthすでに指定されています。画像用の CSS ルールを追加しました:

img {
    max-width: 500px;
}

しかし、 の場合、と がbig_image.jpg表示されます。アスペクト比を維持しながら画像のサイズを変更するにはどうすればよいでしょうか。width=500height=600

ベストアンサー1

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}
<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">

これにより、指定された領域に対して画像が大きすぎる場合に画像が縮小されます (欠点として、画像は拡大されません)。

おすすめ記事