<article>
  <div class="container">
    <h3>Original Image</h3>
    <div class="img--container">
      <img class="image-1" src="https://images.unsplash.com/photo-1612321049568-402be64b2e28?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85&w=300" />
    </div>
  </div>
  <div class="container">
    <h3>object-position: left bottom;</h3>
    <div class="img--container">
      <img class="image-2" src="https://images.unsplash.com/photo-1612321049568-402be64b2e28?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85&w=300" />
    </div>
  </div>
  <div class="container">
    <h3>object-position: 15% 20%;</h3>
    <div class="img--container">
      <img class="image-3" src="https://images.unsplash.com/photo-1612321049568-402be64b2e28?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85&w=300" />
    </div>
  </div>
  <div class="container">
    <h3>object-position: 40px 60px;</h3>
    <div class="img--container">
      <img class="image-4" src="https://images.unsplash.com/photo-1612321049568-402be64b2e28?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85&w=300" />
    </div>
  </div>
  <div class="container">
    <h3>object-position: right 75%;</h3>
    <div class="img--container">
      <img class="image-5" src="https://images.unsplash.com/photo-1612321049568-402be64b2e28?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85&w=300" />
    </div>
  </div>
  <div class="container">
    <h3>object-position: 10px center;</h3>
    <div class="img--container">
      <img class="image-6" src="https://images.unsplash.com/photo-1612321049568-402be64b2e28?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85&w=300" />
    </div>
  </div>
</article>

article {
  margin: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(27ch, 1fr));
  gap: 1rem;
}
.img--container {
  width: 20ch;
  border: 0.75ch solid #1e88e5;
  background: salmon;
}
img {
  width: 100%;
  display: block;
  object-fit: none;
}
.image-1 {
  object-fit: fill;
  object-position: center center;
}
.image-2 {
  object-position: left bottom;
}
.image-3 {
  object-position: 15% 20%;
}
.image-4 {
  object-position: 40px 60px;
}
.image-5 {
  object-position: right 75%;
}
.image-6 {
  object-position: 10px center;
}