<div class="wrap">
  <div class="item">
    <h2>object-position:center;</h2>
    <img src="https://picsum.photos/350/471" class="cover position01" />
  </div>
  <div class="item">
    <h2>object-position:left left;</h2>
    <img src="https://picsum.photos/350/471" class="cover position02" />
  </div>
  <div class="item">
    <h2>object-position:50% 75%</h2>
    <img src="https://picsum.photos/350/471" class="cover position03" />
  </div>
    <div class="item">
    <h2>object-position:50px 50px;</h2>
    <img src="https://picsum.photos/350/471" class="cover position04" />
  </div>
      <div class="item">
    <h2>object-position:-50px -50px;</h2>
    <img src="https://picsum.photos/350/471" class="cover position05" />
  </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;
  }
}

.cover {
  object-fit: cover;
}

.position01{
  object-position:center;
}

.position02{
  object-position:left left;
}

.position03{
  object-position:50% 75%;
}

.position04{
  object-position:50px 50px;
}

.position05{
 object-position:-50px -50px;
}