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

この記事は最終更新から1年以上経過しています。内容が古くなっているかもしれません。。

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%; /* 縦幅いっぱい */
}

この記事はお役に立てましたか?

はい

ブログランキング・にほんブログ村へ

コメントを残す