[IE、Edge対応]imgをbackgroud-sizeのようにトリミング、拡大縮小できるobject-fitにできないこと

Last updated at 2019-10-19Posted at 2019-10-19

できないこととタイトルには書きましたが、正確には少し調整すればできます。

img要素をbackgroud-sizeのように表示させられるobject-fitについて。
IEやEdgeでは対応していないため、object-fit-images というJSで補ってあげる必要があります。

object-fitの詳しい実装方法はWebクリエイターボックスの以下の記事を参考にしてください。
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー

IE、Edgeでできないこと

画像をJSなどでDOM生成する場合などは実装することができません。
例えばモーダルのギャラリーなどがありますが、
img要素をフロント側で生成する場合はIEやEdgeでは動作しません。

object-fit-imagesはIE、Edgeではbackgroud-sizeで代替する仕組みで、
DOMが読み込まれた後にobject-fit-imagesの関数が実行され、
srcを取得してbackgroud-imageに置き換えている。

そのためJSなどでimgを生成もしくはsrcを変更している仕組みではobject-fit-imagesは使えません。
もしobject-fitのような動きにしたいなら最初からbackgroud-sizeで指定するのも良いかもしれません。

html

<div class="imgWrap" style="backgroud-image: url('[JSで生成]');">
  <img class="img" src="ダミー" alt=""> ← 高さや幅を保持する用
</div>

css

.imgWrap {
  background-size: contain;
  background-position: 50% 0; ←拡大縮小の基準値
  background-repeat: no-repeat;
}

画像を生成した際にobject-fit-imagesの関数を都度読込すれば良いのかもと思ったので、やってみてできるかできないかは、また追記します。

生成した後にobject-fit-imagesの関数を実行すれば問題なく動作しました。
（細かい記述は省いてます）
こちらのほうが記述としては簡単。

javascript

const _createElement = () => {
  〜画像生成の記述は省略〜
  //画像生成した後に↓ クラス名は生成したと分かる名前に
  objectFitImages('img.create-object-fit-img');
};

以上。