<div class="object-fitArea">  
  <div class="object-fit">
    <p>object-position: 0 0</p>
    <img src="https://www.pakutaso.com/shared/img/thumb/NS562hasibirokou_TP_V4.jpg" alt="" class="cover1">
  </div>
  <div class="object-fit">
    <p>object-position: 50% 50%</p>
    <img src="https://www.pakutaso.com/shared/img/thumb/NS562hasibirokou_TP_V4.jpg" alt="" class="cover2">
  </div>
  <div class="object-fit">
    <p>object-position: 100% 100%</p>
    <img src="https://www.pakutaso.com/shared/img/thumb/NS562hasibirokou_TP_V4.jpg" alt="" class="cover3">
  </div>
</div>
.object-fitArea {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  justify-content: space-between;
}

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

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

.cover2 {
  width: 300px;
  height: 150px;
  object-fit: cover;
  object-position: 50% 50%;
}

.cover3 {
  width: 300px;
  height: 150px;
  object-fit: cover;
  object-position: 100% 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.