<div class="wrap">
  <div class="item">
    <h2>object-fit:fill（初期値）</h2>
    <img src="https://picsum.photos/350/471" class="fill" />
  </div>
  <div class="item">
    <h2>object-fit:contain</h2>
    <img src="https://picsum.photos/350/471" class="contain" />
  </div>
  <div class="item">
    <h2>object-fit:cover</h2>
    <img src="https://picsum.photos/350/471" class="cover" />
  </div>
    <div class="item">
    <h2>object-fit:none</h2>
    <img src="https://picsum.photos/350/471" class="none" />
  </div>
      <div class="item">
    <h2>object-fit:scale-down;</h2>
    <img src="https://picsum.photos/350/471" class="scale-down" />
  </div>
</div>

.wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

h2 {
  font-size: 16px;
}

img {
  width: 30vw;
  height: 250px;
  background: #d7eef2;
  border: 1px solid #aaa;
}

@media only screen and (max-width: 768px) {
  img {
    width: 100vw;
  }
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}