CSS - object-fit

• トップ
• CSSリファレンス
• object-fit

概要

説明

画像(<img>)やビデオ(<video>)の横幅(width)や高さ(height)を指定した場合に、オブジェクトをどのように拡大・縮小するかを指定します。

使用例

.test {
 display: inline-block;
 margin-right: 6rem;
}
.img1 {
 width: 80px;
 height: 50px;
 border: 1px solid #000;
 margin: 10px 0;
}
.img2 {
 width: 50px;
 height: 80px;
 border: 1px solid #000;
 margin: 10px 0;
}
.fill {
 object-fit: fill;
}
.contain {
 object-fit: contain;
}
.cover {
 object-fit: cover;
}
.none {
 object-fit: none;
}
.scale-down {
 object-fit: scale-down;
}

<div class="test">
 <div>object-fit: fill</div>
 <img class="img1 fill" src="example.gif" alt="test">
 <img class="img2 fill" src="example.gif" alt="test">
</div>
<div class="test">
 <div>object-fit: contain</div>
 <img class="img1 contain" src="example.gif" alt="test">
 <img class="img2 contain" src="example.gif" alt="test">
</div>
<div class="test">
 <div>object-fit: cover</div>
 <img class="img1 cover" src="example.gif" alt="test">
 <img class="img2 cover" src="example.gif" alt="test">
</div>
<div class="test">
 <div>object-fit: none</div>
 <img class="img1 none" src="example.gif" alt="test">
 <img class="img2 none" src="example.gif" alt="test">
</div>
<div class="test">
 <div>object-fit: scale-down</div>
 <img class="img1 scale-down" src="example.gif" alt="test">
 <img class="img2 scale-down" src="example.gif" alt="test">
</div>

通常はオブジェクトの中央(50%, 50%)の位置が領域の中央に表示されますが、表示位置をずらしたい場合は object-position を用います。

.top {
 object-position: 50% 0;
}

<div class="test">
 <img class="img1 cover" src="../../image/yuki5.gif" alt="test">
 <img class="img1 cover top" src="../../image/yuki5.gif" alt="test">
</div>

関連項目

リンク

• https://developer.mozilla.org/ja/docs/Web/CSS/object-fit
• https://drafts.csswg.org/css-images/#the-object-fit