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

URL: https://webrandum.net/css-object-fit/
公開日: 2020-04-25
更新日: 2020-04-25
カテゴリー: コーディング
タグ: CSS, Polyfill
出典: Webrandum（著者: サイトウ マサカズ）

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

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

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

## object-fitの使い方

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

See the Pen [ZEbeVWQ](https://codepen.io/31mskz10/pen/ZEbeVWQ) by Masakazu Saito ([@31mskz10](https://codepen.io/31mskz10)) on [CodePen](https://codepen.io).

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

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

```
object-fit: cover;
```

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

```
object-fit contain;
```

 

## ブラウザ対応状況

非常に便利なプロパティなのですが、IE11ではまだ対応していないのがネックです。

IE11でも使いたい場合はPolyfillを設定すれば使えるようになります。

[![Data on support for the object-fit feature across the major browsers from caniuse.com](https://caniuse.bitsofco.de/image/object-fit.png)](http://caniuse.com/#feat=object-fit)

#### IE11対応

Polyfillを使用するためには、[GitHub](https://github.com/fregante/object-fit-images)からスクリプトをダウンロードするか、[CDN](https://cdnjs.com/libraries/object-fit-images)のコードを追加するかします。

[GitHub - fregante/object-fit-images: 🗻 Polyfill object-fit/object-position o...](https://github.com/fregante/object-fit-images)

[object-fit-images - cdnjs.com - The best FOSS CDN for web related libraries t...](https://cdnjs.com/libraries/object-fit-images)

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

```
<script>
objectFitImages();
</script>
```

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

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

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