箱・余白
object-fit 画像を枠に合わせて収める
意味
画像を決まった枠に入れたいときに使います。cover は枠を埋め、はみ出した部分を切ります。contain は画像全体を見せ、枠に空きが残ることがあります。
width と height、または aspect-ratio で枠を決めてから指定します。枠が無いと、切り方も変わりません。
コード
HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。
<img src="/default-logo2.jpg" alt="サイトのロゴ">img {
width: 12rem;
height: 8rem;
object-fit: cover;
}プレビュー
ブラウザ対応
| ブラウザ | 対応 |
|---|---|
| Chrome | 32〜 |
| Firefox | 36〜 |
| Safari | 10〜 |
| Edge | 79〜 |
| Chrome Android | 32〜 |
| Safari iOS | 10〜 |
出典: MDN Web Docs（`@mdn/browser-compat-data`）