cssで背景画像をトリミングする方法

MARKLEAPS

2019.07.31

CSSで背景画像をトリミング
背景画像（background）を、cssだけで
希望の縦横比にトリミングする方法をご紹介します。

「親要素の幅」を基準に縦方向の％を指定する考えを
応用したテクニックとなります。
こちらの記事と合わせてお読みください。

縦横比3:2の画像を16:9にトリミングしてみよう

縦横比3:2（横 500px × 縦333px）を
縦横比16:9（横 500px × 縦281px）にトリミングしてみます。

縦横比3:2の画像

html

<div class="wrapper">
    <div class="inner"></div>
</div>

</div>

css

.wrapper {
    width: 500px;
    background: url(./pic/img01.jpg) no-repeat center center;
    background-size: cover;

}
.inner {
    padding-top: 56.25%;
}

.wrapper {

width: 500px;

background: url(./pic/img01.jpg) no-repeat center center;

background-size: cover;

}

.inner {

padding-top: 56.25%;

}

子要素のpadding-top: 56.25%;
という指定で、縦横比をコントロールしています。

16:9にトリミング後の画像

計算式

縦横比の計算式は以下になります。

高さ ÷ 幅 × 100

今回の例では16:9にしたかったので、
9 ÷ 16 × 100 ＝ 56.25
という計算になります。

cssでは、「自分の幅」を基準に縦方向を％で指定できません。
「親要素の幅」を基準に縦方向の％は指定できます。
詳しくはこちらの記事で紹介しています。

この考えを元にした計算式となります。

before擬似要素でも同じことができる

極力htmlをシンプルにしたい、そんな時はbefore擬似要素でも
同じようにトリミングする事が出来ます。

html

<div class="wrapper">
</div>

1 2	<div class="wrapper"> </div>

css

.wrapper {
    width: 500px;
    background: url(./pic/img01.jpg) no-repeat center center;
    background-size: cover;

}
.wrapper:before {
    content: "";
    display: block;
    padding-top: 56.25%;
}