WebDesigner's Memorandumウェブデザイナーの備忘録

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

CSSで画像を一定のサイズ・比率に保って切り抜く「object-fit」

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

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

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

object-fitの使い方

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

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

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

比率が崩れないように切り取ってもらうためには、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

IE11対応

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

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

<script>
objectFitImages();
</script>

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

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

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね