2019年10月21日

「object-fit」の基本的使い方とIE対策について

「object-fit」の基本的使い方とIE対策について

お世話になっております。佐藤です。

レスポンシブのサイトを実装する際やCMSの実装などに便利なCSSのプロパティ「object-fit」を紹介致します。

「object-fit」の基本的な使い方

img {
  object-fit: cover;
  object-fit: contain;
}

このプロパティを指定することにより画像の比率を変えずに指定した幅や高さに収めることが可能となります。画像だけではなく、動画にも指定可能です。

特に役に立つ使い方

私がこれを最も重宝するときはCMSの実装をする際です。以下の画像をご覧下さい。

弊社制作実績一覧の画像

画像は弊社の実績の部分なのですが、ここは管理画面側で簡単に更新できるようにしています。ある程度大きさの同じ画像を準備できればいいのですが、それをわざわざ用意するのは面倒です。ましてやお客様への納品物に画像の大きさを意識させるシステムはあまり良くないと私は考えております。(もちろん大きさを同じにすることが最善ですが。)

その時に便利なのが「object-fit」。
このプロパティを指定することでユーザーが不均等な画像を登録したとしてもホームページ上では綺麗に出力することが出来ます。

非対応ブラウザ (IE対策)

ただ、困ったことにこのプロパティはIE(Internet Explorer)では効かないんです。Windows7のサポート終了に伴い、ユーザー数が減少していくことは間違い無いですが、対応を求められることもかなりありますし、お客様からもお願いされることも多いです。

ありがたいことに、たった数行追加するだけで「object-fit」を適用できる「object-fit-images」スクリプトが公開されています。

たった2行で完結するCDN

ただ正直、「object-fit」のためだけにファイルをダウンロード、読み込むのは面倒だと思い、探したところ、これにはCDNが公開されているんです!(参考記事

CDNの使い方は以下の通りです。

HTMLファイル

<!--objedt-fit(IE対策)-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.3/ofi.js"></script>
<script>objectFitImages();</script>

CSSファイル

img {
  object-fit: cover;
  font-family: 'object-fit: cover;'; /*IE対策*/
}

たったこれだけです。かなり便利だと思います。
是非、「object-fit」を利用してみて下さい。