コーディング

IEやEdgeにもobject-fitを対応させる方法

2017.10.25

2017.10.26

IEやEdgeにもobject-fitを対応させる方法のアイキャッチ画像

以前「object-fitをつかって画像をボックスいっぱいに表示させる方法」でobject-fitを紹介いたしました。私も非常に便利でよく使っているプロパティーの一つです。
そして使えば使うほど、PC向けにもこのプロパティーは使用したくなります。
そこで問題になるのがInternet Explorer(以下IE)とEdgeです。

object-fit-imagesを使用して対応する

先述のブラウザはobject-fitに対応していません。そこで「object-fit-images」というライブラリを使用します。
まずは上記のページにアクセスして緑色の「Clone or download」ボタンを押してライブラリをダウンロードしてください。

HTML

まずはjQueryの呼び出しの後に、ライブラリを呼び出します。
このライブラリは「dist」フォルダの中に格納されています。

<script src="/js/ofi.js"></script>

次に、スクリプトを実行します。

<script>
objectFitImages();
</script>

上記ではすべての画像を対象に処理がされます。
特定のクラスのみに処理を実行する場合は以下のように設定します。

//imgタグ
<img class="hoge" src="/photo.jpg">

//スクリプトの実行
<script>
objectFitImages('.hoge');
</script>

これでHTMLの準備は完了です。

CSS

次にスタイルの設定です。スタイルは以下のように設定します。

.hoge {
object-fit: cover;
font-family: 'object-fit: cover;'
}

これでobject-fitをIEやEdgeにも適応させることができます。
参考にしてみてください。

SHARE

この記事の筆者

Webクリエイター 古川 徹朗

Webクリエイター 古川 徹朗

Webに関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。