CSS基礎 練習問題 51：画像や要素の最大幅の指定
画面幅が狭くなったときに画像が親要素からはみ出ないようにしたい。ただし、画像の本来のサイズ以上には無理に引き伸ばさないようにする場合、正しいCSSの書き方はどれか。
- width: 100%;
- max-width: 100%;
- min-width: 100%;
- overflow: hidden;
- object-fit: cover;
正解と解説を見る
正解：max-width: 100%;
画像の本来のサイズを超えて拡大されるのを防ぎつつ、親要素より画面幅が狭い場合には親要素に合わせて縮小させるには `max-width: 100%;` が正解です。
【正解の理由】
`max-width` プロパティは要素の最大の幅を指定します。`100%` にすることで「親要素の幅を上限とする」ため、親が小さくなればそれに合わせて縮小し、親が大きくても本来のサイズ以上には広がりません。
【不正解の理由】
• `width: 100%;` は常に親要素の幅と同じサイズに引き伸ばされるため、本来のサイズを超えて画像がぼやける原因になる
• `min-width: 100%;` は最低でも親の幅と同じサイズにする指定であり、はみ出しを防ぐ目的とは逆の動作になる
• `overflow: hidden;` ははみ出た部分を切り取って隠す指定であり、画像自体を縮小して全体を表示するわけではない
• `object-fit: cover;` は指定された縦横枠内で比率を維持して切り抜くためのプロパティであり、幅自体の制御には使えない