CSSだけで画像の比率を保ってトリミングできる「object-fit」

カード型のレイアウトを実装するときなどに「画像を特定のサイズにしたい！」と思うときがあります。

自分が画像を書き出して実装するのであれば、サイズを合わせて書き出すので普通に実装すれば実現できますが、クライアント側で運用をお願いする場合や、ユーザーが画像をアップロードして反映するものの場合は、画像サイズや比率を考えずにアップされてしまいます。

そんなとき「理想の画像サイズ・比率じゃないときに特定のサイズに切り抜く」をCSSで実現してくれるのがobject-fitプロパティです。

object-fitの使い方

今回は横幅180px高さ360pxの縦長の画像を、横幅360px高さ222pxにしたい場合を想定します。

See the Pen ZEbeVWQ by Masakazu Saito (@31mskz10) on CodePen.

まず、widthとheightを指定すれば、画像を固定の幅にできますが、その代わりに比率があっていない画像を使った場合は比率が崩れて表示されてしまいます。

比率が崩れないように切り取ってもらうためには、object-fit: cover;を指定します。

object-fit: cover;

ちなみに、object-fit contain;を指定すると、画像全体を表示させるようになります。

object-fit contain;

ブラウザ対応状況

非常に便利なプロパティなのですが、IE11ではまだ対応していないのがネックです。
IE11でも使いたい場合はPolyfillを設定すれば使えるようになります。

IE11対応

Polyfillを使用するためには、GitHubからスクリプトをダウンロードするか、CDNのコードを追加するかします。

github.com

GitHub - fregante/object-fit-images: 🗻 Polyfill object-fit/object-position o...

https://github.com/fregante/object-fit-images

cdnjs.com

object-fit-images - cdnjs.com - The best FOSS CDN for web related libraries t...

https://cdnjs.com/libraries/object-fit-images

object-fit-images - Polyfill object-fit and object-position on images on IE9, IE10, IE11, Edge, Safari, ... - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!

あとはPolyfillの読み込み後に下記のスクリプトを実行します。

<script>
objectFitImages();
</script>

あとはfont-family: 'object-fit: cover;';というように、font-familyでobject-fitを指定してあげます。

object-fit: cover;
font-family: 'object-fit: cover;';

これでIE11でも比率が崩れることなく表示されます。