表示エリアよりも大きい画像を縮小せずに中央に表示する

画像のサイズよりも表示エリアのサイズが小さい場合、そのままでは左上を始点にして画像が表示されてしまうので、CSSを使って、画像を縮小させずに、表示エリアからはみ出てしまう部分を上下左右で均等にして、画像を中央に表示する方法です。

コードは以下の通り。

HTML

<div class="sample-image-content">
  <img src="sample-image.jpg">
</div>

CSS

.sample-image-content {
  position: relative;
  width: 300px;
  height: 150px;
  overflow: hidden;
}
.sample-image-content img {
  position: absolute;
  width: 400px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

「400px × 300px」の画像をそのまま表示。

「400px × 300px」の画像を「300px × 150px」のエリアに中央表示。