画像(<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>

object-fit: fill

object-fit: contain

object-fit: cover

object-fit: none

object-fit: scale-down

通常はオブジェクトの中央(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