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;
}
たった１行追加するだけで画像を良い感じにトリミングして、歪んでいたのが解消されます。
非常に便利なobject-fitですが、冒頭にも述べたようにこのままの状態でIEで確認したら、画像は歪んだままです。
IEはobject-fitプロパティに対応しておらず、そのままでは効いていない状態なんですね。
IEに対応させる
object-fitをIEでも対応させるにはJavaScriptのプラグインを使う必要があります。JavaScriptが苦手だという人でもほとんどコピペで行けるので、ぜひ試してみてください。
方法としては２通りあります。
- 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対策を求められた際にはしっかり対策できるようにしておきたいですね。
