画像をトリミングして表示する【CSS】
この記事は最終更新から1年以上経過しています。内容が古くなっているかもしれません。。

CSSで画像をトリミング(マスク)するときのコードメモ。例えば記事一覧ページでサムネイル画像のサイズを固定して表示させたいときなどに。
<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%; /* 縦幅いっぱい */
}
活用事例
この記事はお役に立てましたか?
いいえ
ヤフーに戻ります