画像をトリミングして表示する【CSS】

2021年1月26日公開・2022年8月25日更新

CSSで画像をトリミング（マスク）するときのコードメモ。例えば記事一覧ページでサムネイル画像のサイズを固定して表示させたいときなどに。

HTML

<div class="img-mask">
  <img src="XXX" alt="">
</div>

CSS

.img-mask {
  position: relative;
  background: #f3f3f3; /* 画像以外の背景色 */
  overflow: hidden;
}

.img-mask::before {
  content: "";
  display: block;
  /* ▼表示サイズ（お好みで）▼ */
  padding-top: 66.6667%; /* 3:2 */
  padding-top: 75%; /* 4:3 */
  padding-top: 100%; /* 正方形 */
}

.img-mask img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* ▼画像の表示設定（お好みで）▼ */
  max-width: 100%; /* 横幅いっぱい */
  max-height: 100%; /* 縦幅いっぱい */
}

活用事例