株式会社ぺいじず

2020.08.12

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、早く滅びてほしい。。。

※現在ぺいじずでは、Movable Typeを使ってWeb制作をする仲間を募集中です。
ご興味のある方は採用情報をご確認くださいませ。

株式会社ぺいじず

私たちは、東京都で創業33年の制作会社です。
長年のマニュアル制作で培われたライティングスキルを活かし、効果的なWebサイトをご提案しています。