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

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

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

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

 

縦横比3:2の画像

html

css

 

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

 

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

計算式

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

高さ ÷ 幅 × 100

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

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

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

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

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

 

html

css