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の指定が適切か確認。
素敵だ。