エキスパート：実技問題（HTML作成、CSS読込と作成、画像の表示、JavaScriptの読込、レスポンシブWebデザイン対応）
縦横比が異なる複数の商品画像を、img要素を使って同一サイズの正方形の枠内にトリミングし隙間なく表示したい。この場合にCSSで指定すべきプロパティとして最も適切なものはどれか。
- Abackground-size: contain;
- Bobject-fit: fill;
- ✓object-fit: cover;
- Dwidth: auto; height: auto;
解説
object-fit: coverは要素の縦横比を保ったまま枠全体を覆うようにトリミング表示するため、枠に隙間ができず画像も歪まない。fillは画像が歪み、containは余白ができるため不適切である。
根拠実技問題：画像の表示