画像の縦横比を維持する「object-fit」をIEに対応させる方法【簡単】【ジェット・コーディング】

コーディング部ログ

お疲れ様です！

複数の画像の縦横比がバラバラ…。
画像を加工して縦横比を統一すれば良いですが、お客様や案件によっては難しい場合もあったりします。

そこで、便利で簡単なcssプロパティが「object-fit」です。

導入は簡単。

ingタグに対して、widthとheightを指定し、
object-fit: cover;
を追加するだけ。

例）
width: 100%;
height: 300px;
object-fit: cover;

これで画像がcssの指定でトリミングされます。

とっても便利な「object-fit」ですが、一点だけ問題が...。

IE対応です。デフォルトでは対応してくれません。

IEへの対応は、JSをGithubで公開されているJSを読み込むことで解決可能です。
ここでは有名な２つを紹介します。

それぞれの使い方は、GitHubを参考にしてみて下さい。
IE対応は、一手間かかりますが、あと数年は我慢ですね。