CSS基礎 練習問題 63：画像のトリミング制御
HTMLの<img>タグで読み込んだ画像が、指定した幅や高さに合わせて歪んでしまうのを防ぐため、縦横比を保ちながら要素全体を埋めるように画像を切り抜いて表示したい場合、正しいCSSの書き方はどれか。
- object-fit: cover;
- object-fit: contain;
- object-fit: fill;
- object-fit: none;
- object-fit: scale-down;
正解と解説を見る
正解：object-fit: cover;
画像が歪むのを防ぎ、要素の枠全体を埋めるように縦横比を保って切り抜く「object-fit: cover;」が正解です。
【正解の理由】
「object-fit: cover;」は、画像が指定された枠の幅と高さの両方を満たすように自動的に拡大縮小され、はみ出した部分がトリミングされるため、レイアウト崩れを防ぐのに最適です。
【不正解の理由】
• 「object-fit: contain;」は、画像全体が枠内に収まるように縮小されるため、画像の周りに余白ができることがあります
• 「object-fit: fill;」は、縦横比を無視して枠のサイズに強制的に引き伸ばすため、画像が歪んでしまいます
• 「object-fit: none;」は、画像の元のサイズをそのまま維持するため、枠が小さいと画像の一部しか表示されません
• 「object-fit: scale-down;」は、「none」と「contain」のうち画像がより小さく表示される方を自動で選ぶ指定です