【フロントエンド1000本ノック】0071_レスポンシブイメージを実現するため、img要素のwidth： 100%； height： auto；のスタイルがなぜ重要なのかを説明せよ。

Posted at 2025-10-21

この記事は人間が書きました

はじめに

こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。

<img> 要素にこのスタイルを適用すると、width: 100%; 画像が持つ固有の幅を上書きし、「常に親要素の幅の100%に合わせなさい」という命令になります。親要素が縮めば、画像も一緒に縮むことになります。

height: auto; は、width が 100% に指定されたことで、高さも無理やり引き伸ばされると比率が崩れてしまいます。height: auto; は「高さは width に合わせて、元の画像の縦横比を保ったまま自動で調整しなさい」という命令です。

この2つのスタイルを組み合わせることで、画像は親要素いっぱいに広がりつつ、アスペクト比を維持したまま表示されることになります。