「max-width: 100%」が指定されたimg要素を縦横比が維持された状態で縮小する方法

CSSまわりで少し学んだのでメモ。

以下のようなCSSを記述することで、親要素の横幅を超えてしまう大きさの画像は、親要素の横幅に収まるまで、自動的に縮小して表示されるようになります。

ですが、このままだと画像の高さは縮小される前と変わらないので、画像の縦横比(アスペクト比)がおかしい状態で画面に表示されてしまいます。

縦横比をが維持された状態で画像を縮小するためには、上記のCSSを以下のように修正します。

height: auto;を指定することで、画像の縮小時に高さも自動的に調整されるようになります。

状況によって画像の表示サイズが変わるようなページをつくるときに便利ですね。それでは!