object-fit-images（ofi.js）：レスポンシブ対応　cover / contain 切替

object-fit を IE に対応させる JavaScript「object-fit-images（ofi.js）」様。

▼object-fit-images
https://github.com/fregante/object-fit-images

でも、リサイズ時に cover / contain を切り替えるとうまく動作せず。。。

公式には「objectFitImages(null, {watchMQ: true});」を設定すると書いてあるのですが、変な隙間があいたり、親の高さが消えたりして、こちらもうまくいきませんでした。
（私の設定が間違っているのかもですが）

オプションなしで IE の DOM を見ていたら、どうやら「object-fit-images（ofi.js）」は 対象の IMG に background 系の CSS を追加する JavaScript のよう。
一度読み込むとリサイズしても CSS 変更はされませんでした。

で、cover / contain 時のソースを比較したところ、差分は background-size: cover / contain; しかありませんでした。

そこで、CSS に background-size を !important で併記したところ、うまくいきました。
オプションなしの「objectFitImages();」で OK です。

img {
  vertical-align: bottom;
}
.your-favorite-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
  font-family: 'object-fit: cover;';
  background-size: cover !important;
}
@media screen and (max-width: 768px) {
.your-favorite-image {
  object-fit: contain;
  font-family: 'object-fit: contain;';
  background-size: contain !important;
}
}

IE、早く滅びてほしい。。。