【CSS3】object-fitプロバティを使い、画像を簡単にトリミング

26 Mar

cssで画像をトリミングできるプロバティとして「object-fit」というのがあるようですね。背景画像に対して適用できる「background-size」に使い方が非常に似ています。それでは、紹介に入りたいと思います。

object-fitプロバティについて

例えば、以下のようなお肉（マトンフィレ）のお写真があります。

こちらheight: 300px;と指定してます。縦横比が崩れグシャッとした感じの表示になっているかと思います。それでは、この状態にobject-fit: cover;と追記してみようと思います。結果は以下のように…

お分かりいただけましたでしょうか？縦横比が維持され、センターでトリミングされたような表示になっているかと思います。
このような事がCSSたった1行で実現してしまうのです。便利ですね！

他にも例えばobject-fit: contain;にしてみると…

今度は縦横比が維持されたまま、画像全体（マトンフィレ）が表示される形となりましたね。使える値としては以下の5種類となります。

fill	初期値です。縦横比は維持せず埋め尽くされて表示されます。
contain	縦横比を維持します。要素全体が収まるよう調整され、幅・高さの内長い方に合わせてフィットされます。
cover	縦横比を維持します。要素全体が埋め尽くされるよう調整され、幅・高さの内短い方に合わせてフィットされ、長い方ははみ出しトリミングされます。
none	サイズ調整なく表示されます。
scale-down	none、containの内、小さくなる方が適用されます。

個人的には特に「cover」が便利だなーと思いました。
そして今回は、実際に挙動の確認ができるサンプルも作ってみました！こちらも併せて見てみてください！

CSS3は便利なものが目白押しですね！古いIEの対応が不必要になったりで、特に最近はCSS3を存分に使えるような傾向にあるかと思います。覚えて有効活用していきたいものですね。