object-fitをCSSのみでIEにも対応してみる

便利過ぎてobject-fitナシではもう組めなくなってきた今日このごろ。
modernizrなどを使わなくてもCSSだけでIE10（IE9もいけるかも？）に対応する方法を知ったので書いておきます。
absoluteにしてtansformを使って画像の真ん中を合わせています。
（transformが使えないブラウザなんてもう知らない。）
あくまでレガシー対応で、完全対応ではないですが、デザインによってはこれで十分なケースがあると思うので。

html

<span class="media">
    <img src="image01.jpg" alt="" />
</span>
<span class="media">
    <img src="image02.jpg" alt="" />
</span>

CSS

.media {
    position: relative;
    width: 500px;
    height: 200px;
    display: inline-block;
    overflow: hidden;
}
.media img {
    position: absolute;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
@supports ( object-fit: cover ) {
    .media img {
        position: static;
        height: 100%;
        width: 100%;
        left: 0;
        -o-object-fit: cover;
        object-fit: cover;
        top: 0;
        -ms-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        transform: none;
    }
}

デモ

っていうことで、じゃあobject-fit使わなくても良いんじゃん？てなりそうだけれど、position弄っちゃってたりするので、あくまでも後方互換として使うのが吉かと。

※ 追記：横長のものに入れたり画像が固定サイズなら特に問題ないと思いますが、デモみてもらうと分かるように、縦横自在に操るにはmax-widthなどで都度調整しなくてはならないのでメンドイです。（横長の画像の縦をちょっと削りたい、ぐらいだったら大丈夫。）

・・・早くobject-fitのみで済ませられる日が来ないかなあ。

モダンブラウザとIE10では動作確認済みですが、何か間違えてたら教えてください。

参照

手前味噌のページで恐縮ですが、WordPressのテーマで使われてて気がついたのが最初でした。
WordPressのは画面全体を覆う場合なので、max-width: 1000%だったり、min-width:100vwとかが入っているのがミソ。

【Twenty Seventeenのちょこっと解説】ヘッダーイメージのCSSがアツイ【object-fit】 – Photosynthesic blog
http://blog.photosynthesic.jp/2017/01/【twenty-seventeenのちょこっと解説】ヘッダーイメージのcssが/

@supportについてはこちらとかを。

@supports - CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/@supports