object-fit
とは画像をトリミングするのにすごく便利なCSSプロパティです。しかし、デフォルトのままではIEに対応しておらず、Google Chromeなどで表示した場合とIEで表示した場合では画像デザインが崩れてしまいます。
この記事ではIEでもobject-fit
を利用して画像をトリミングする方法を解説していきたいと思います。
そんな自分も実際にWeb制作案件を行っている際に、この問題に直面し解決できました。
object-fitとは
コーディングをしていると、複数の画像要素を同じ大きさに統一して並べる必要が出てきます。しかし、用意されている画像は大きさがバラバラ、、、
そんな時に役立つのがこのobject-fit
プロパティです。
大きさの違う画像を同じ大きさになるように、object-fit
を使わずにコーディングしてみます。
<div class="images">
<div class="image"><img src="images/img1.jpg"></div>
<div class="image"><img src="images/img2.jpg"></div>
<div class="image"><img src="images/img3.jpg"></div>
</div>
/* 複数の画像をまとめた親要素 */
.images{
display: flex;
justify-content: center;
margin: 20px 0;
}
/* 画像コンテナ */
.image{
width: 500px;
height: 500px;
margin: 0 20px;
}
/* 画像 */
img{
width: 100%;
height: 100%;
}
元々の画像の大きさが異なるものを無理矢理同じ大きさに統一しようとすると、画像が歪んでしまいます。
そんな時に画像を良い感じにトリミングできるのがobject-fit
プロパティです。
次の一行を追加します。
/* 画像 */
img{
object-fit: cover;
}
たった1行追加するだけで画像を良い感じにトリミングして、歪んでいたのが解消されます。
非常に便利なobject-fit
ですが、冒頭にも述べたようにこのままの状態でIEで確認したら、画像は歪んだままです。
IEはobject-fit
プロパティに対応しておらず、そのままでは効いていない状態なんですね。
IEに対応させる
object-fit
をIEでも対応させるにはJavaScriptのプラグインを使う必要があります。JavaScriptが苦手だという人でもほとんどコピペで行けるので、ぜひ試してみてください。
方法としては2通りあります。
- object-fit-images
- fitie.js
上記どちらでも対応可能です。が、object-fit
と併用してよく使われるobject-position
というプロパティがありますが、fitie.jsではobject-position
プロパティには対応できません。
そのため、今回はobject-fit-imagesを使った方法を紹介していきます。
ofi.min.jsをダウンロードする
object-fit-imagesを使うにはGithubに公開されているこちらのファイルをダウンロードしてくる必要があります。
ofi.min.jsをプロジェクトに配置する
プロジェクトのルートディレクトリのjsフォルダに先ほどダウンロードしてきたofi.min.jsを配置します。
ルートディレクトリ
┣ js
┗ ofi.min.js
ofi.min.jsを読み込む
htmlファイルのbody
閉じタグの直前に下記のscript
タグを記述し、ofi.min.jsを読み込みます。
<scrpt src="js/ofi.min.js"></script>
</body>
スクリプトの実行する
必ず先ほどofi.min.jsを読み込んだ後に、次のスクリプトを記述するようにしてください。
<scrpt src="js/ofi.min.js"></script>
<script> objectFitImages(); </script>
</body>
IEに対応させるためのCSSを記述する
最後のステップです。object-fit
を適用するセレクタに下記の記述を追加します。
/* 画像 */
img{
object-fit: cover;
/* 追加 */
font-family: 'object-fit:cover;';
}
以上でIEでもobject-fit
プロパティが適用され、画像がきれいにトリミングされています。
また、object-position
プロパティを使う際のコードも記述しておきます。ぜひ、参考にしてください。
/* 画像 */
img{
object-fit: cover;
object-position: center center;
/* 追加 */
font-family: 'object-fit:cover; object-position: center center;';
}
まとめ
IE対策は自分もまだまだ知らないことがたくさんあります。IE対策を求められない案件もあるかもしれませんが、IE対策を求められた際にはしっかり対策できるようにしておきたいですね。