<script src="https://web.runland.co.jp/wp-content/uploads/2022/12/ofi.min_.js"></script>

<!-- 画像が横向きの場合 -->
<p>画像が横向きの場合</p>
<div class="image">
  <img src="https://web.runland.co.jp/wp-content/uploads/2022/12/20221221_img1.jpg" class="object-fit">
</div>

<!-- 画像が縦向きの場合 -->
<p>画像が縦向きの場合</p>
<div class="image">
  <img src="https://web.runland.co.jp/wp-content/uploads/2022/12/20221221_img2.jpg" class="object-fit">
</div>
.image{
  width:120px;
  height:120px;
  position:relative;
  overflow:hidden;
  border-radius:50%;
}
.image img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  min-height:100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.object-fit{
  object-fit: cover;
  font-family: 'object-fit: cover;' /* IEに対応させるためのスタイル */
}

/* 以下は無視 */
p{
  font-size:14px;
  line-height:1;
}
.image{
  margin-bottom:40px;
}
<script>
  objectFitImages('.object-fit');　// class="object-fit" にのみ指定
</script>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.