CSS基礎 練習問題 29：CSS画像サイズの指定（widthとheightの自動調整）
縦横比を保ったまま画像の幅を親要素の100%に合わせて表示したい場合、正しいCSSの書き方はどれか。
- width: 100%; height: auto;
- width: 100%; height: 100%;
- width: auto; height: auto;
- size: 100%;
- width: 100%; height: fixed;
正解と解説を見る
正解：width: 100%; height: auto;
画像の幅を親要素いっぱいに広げつつ縦横比を崩さないためには、widthを100%にしてheightをautoに指定し、高さを自動計算させます。
【正解の理由】
height: auto;を指定すると、widthの値に応じて画像の縦横比を保ったまま高さが自動的に計算されるため、画像が歪むことなく親要素の幅いっぱいに表示されます。
【不正解の理由】
• 「width: 100%; height: 100%;」：heightも100%に固定すると親要素の高さに合わせて引き伸ばされ、縦横比が崩れる可能性がある
• 「width: auto; height: auto;」：widthもautoにすると画像本来のサイズのまま表示され、親要素の幅いっぱいには広がらない
• 「size: 100%;」：sizeというCSSプロパティは存在しない
• 「width: 100%; height: fixed;」：heightにfixedという値は存在しない