【CSS】画像をトリミングするプロパティobject-fit

画像を並べる時に、制作者側でアスペクト比を統一していればキレイに並べられるので問題ありませんが、WordPressをはじめユーザーがどのような画像をアップロードするかわからない環境下だと横幅や縦幅がバラバラの画像を利用されてしまう事が多くあります。

そんな時に利用できるobject-fitという画像をトリミングするプロパティを説明します。

今回はあえて横長の写真を用意しました。元のサイズは横幅1280px、縦が600pxの画像です。

<img src="http://nakata.design/wp-content/uploads/css-object-fit-01.jpg" alt="">

アスペクト比を無視して、左右200pxの画像を配置してみます

上記画像を、下のサイズへCSSで変更します。

img{ width:200px; height:200px; }

すると元のアスペクト比を無視して指定したサイズへ変更されるので、縮んでしまいます。そこで、object-fit:coverのCSSを画像タグに追加します。

img{   /*追加*/ object-fit:cover;   width:200px; height:200px; }

すると、先程のような縮んだ状態ではなくなります。

object-fit:coverは、画像の縦横比を維持したまま全体を覆うようにフィットします。
はみ出した部分は隠れてしまうので、表示されません。

よく利用される例として、メインビジュアルでの利用があります。最近の流行りでは左右いっぱいの大きな画像を利用して見せる方法です。

img{   /*左右は100%、天地は任意の数値で固定できる（ここでは200px）*/ object-fit:cover; width:100%; height:200px; }

そのままだと横幅が大きくなればなるほど高さも必要になってきてしまいますがobject-fit:coverを利用すれば上の例とは対照的に天地が隠れる部分となり、高さは任意の数値を保ってくれます。