object-fitとobject-positionをIEやEdgeでも動かす。

object-fitとobject-positionはとても便利なのだけど、IEとEdgeは使えないのでIEとEdgeでは使えない。
いまだに「IE非対応なので・・・」で悩まされるとは。
いつまで経っても足を引っ張られる。

調べたら、コチラのプラグインで解決できた。
https://github.com/bfred-it/object-fit-images

説明にある通り、jQueryを使っている場合は、

$(function () {
objectFitImages('.sample');
});

あとは、cssにも追記が必要。

.sample{
object-fit: cover;
object-position: center top;
font-family: 'object-fit: cover; object-position: center top;'
}

こんな感じ。
font-familyに、使用したいパラメータをセットして使うみたい。
うまくいかないときは、widthとheightの指定が適切か確認。

素敵だ。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする