1. ホーム
  2. css

[解決済み] CSSによる画像の強制リサイズとアスペクト比の保持

2022-03-21 05:02:01

質問

画像を扱っているのですが、アスペクト比の問題にぶつかりました。

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

ご覧の通りです。 heightwidth はすでに指定されています。画像用のCSSルールを追加しました。

img {
  max-width: 500px;
}

しかし big_image.jpg を受信します。 width=500height=600 . アスペクト比を維持したまま、画像をリサイズするように設定するにはどうしたらよいですか?

解決方法は?

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="http://i.stack.imgur.com/aEEkn.png">

これは、指定した領域に対して画像が大きすぎる場合に、画像を縮小するものです(ダウンサイドとして、画像を拡大することはありません)。