CSS - object-fit

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

概要

属性名 object-fit
fill | contain | cover | none | scale-down
初期値fill
適用可能要素リプレース要素
継承しない
サポートhttps://caniuse.com/?search=object-fit

説明

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

説明
fillオブジェクトの横幅が width に、高さが height になるように拡大・縮小されます。
containオブジェクトの縦横比を保ったまま、縦幅いっぱい、もしくは、横幅いっぱいに拡大・縮小されます。オブジェクトの縦横比と width と height の比が合わない場合は隙間が生じます。
coverオブジェクトの縦横比を保ったまま、縦幅いっぱい、もしくは、横幅いっぱいに拡大・縮小されます。オブジェクトの縦横比と width と height の比が合わない場合はオブジェクトの一部がはみ出します。
none拡大・縮小しません。
scale-downnone または contain の内、オブジェクトの大きさが小さい方が採用されます。

使用例

CSS
.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;
}
HTML
<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>
表示
object-fit: fill
test test
object-fit: contain
test test
object-fit: cover
test test
object-fit: none
test test
object-fit: scale-down
test test

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

CSS
.top {
  object-position: 50% 0;
}
HTML
<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>
表示
test test

リンク


Copyright (C) 2022-2023 杜甫々
初版:2022年8月7日、最終更新:2023年1月22日
http://www.tohoho-web.com/css/prop/object-fit.htm