<div class="img-box">
  <img src="https://fastcoding.jp/blog/wp-content/uploads/2020/12/apple2.jpg" alt="" />
  <h2>中央</h2>
  <p>object-position 指定なし</p>
</div>
<div class="img-box">
  <img class="left-top" src="https://fastcoding.jp/blog/wp-content/uploads/2020/12/apple2.jpg" alt="" />
  <h2>左上</h2>
  <p>object-position: 0 0</p>
</div>
<div class="img-box">
  <img class="right-bottom" src="https://fastcoding.jp/blog/wp-content/uploads/2020/12/apple2.jpg" alt="" />
  <h2>右下</h2>
  <p>object-position: 100% 100%</p>
</div>
.img-box {
  margin:20px;
}
.img-box img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  
}
.left-top {
  object-position: 0 0;
}
.right-bottom {
  object-position: 100% 100%;
}

/* Layout */
body {
  display: flex;
  justify-content: center;
  font-family: sans-serif;
  background-color:#FAD9D9;
}
h2 {
  font-size: 1rem;
  margin: 0px;
}
p {font-size:14px;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.