<div class="object-fitArea">
  <div class="object-fit">
    <p>object-fit: fill</p>
    <img src="https://www.pakutaso.com/shared/img/thumb/NS562hasibirokou_TP_V4.jpg" alt="" class="fill">
  </div>
  
  <div class="object-fit">
    <p>object-fit: cover</p>
    <img src="https://www.pakutaso.com/shared/img/thumb/NS562hasibirokou_TP_V4.jpg" alt="" class="cover">
  </div>
  <div class="object-fit">
    <p>object-fit: contain</p>
    <img src="https://www.pakutaso.com/shared/img/thumb/NS562hasibirokou_TP_V4.jpg" alt="" class="contain">
  </div>
  <div class="object-fit">
    <p>object-fit: none</p>
    <img src="https://www.pakutaso.com/shared/img/thumb/NS562hasibirokou_TP_V4.jpg" alt="" class="none">
  </div>
  <div class="object-fit">
    <p>object-fit: scale-down</p>
    <img src="https://www.pakutaso.com/shared/img/thumb/NS562hasibirokou_TP_V4.jpg" alt="" class="scale-down">
  </div>
  
</div>
.object-fitArea {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  justify-content: space-between;
}

.object-fit img {
  background-color: #ccc;
}

.fill {
  width: 300px;
  height: 150px;
  object-fit: fill;
}

.cover {
  width: 300px;
  height: 150px;
  object-fit: cover;
}

.contain {
  width: 300px;
  height: 150px;
  object-fit: contain;
}

.none {
  width: 300px;
  height: 150px;
  object-fit: none;
}

.scale-down {
  width: 300px;
  height: 150px;
  object-fit: scale-down;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.