cssで画像サイズそのままに上下左右中央寄せしてトリミングする方法二つ(IE11対応)

こんにちは！@bluesky177896です。
今回は画像サイズをそのままに、上下左右を中央に揃えてトリミングする(厳密にはしているように見せかける)方法を紹介します。
一行で出来るけどIEがま～た動かないパターンと、IEを無視できるかつ他のトリミング方法にも使える方法の二つを紹介していきます。

サイズの違う画像を同じ大きさの枠の中に綺麗に表示したい

例えば、以下のようなサイズの違う二つのラーメン画像があったとします。

これを以下の様に、同じサイズの枠の中にいい感じに表示したいです。

まず以下のように実装してみます。

See the Pen triming-image-1 by blue (@aoiBlue) on CodePen.0

すると、一番上のimgにサイズを指定する方法だと横幅か縦幅があわないので画像が引き延ばされておかしくなります。
二番目の様に、外に枠を作って画像の幅or高さを100%に揃える方法だと、縦長や横長の画像のカット位置がイマイチになります。

こういった場合にIEとかいうどうしようもない子以外は一行で解決できてしまいます。
画像のサイズを指定した後(上の例の一番最初のように)、「object-fit: cover;」というcssをimgに適用してあげればOKです。それで終わりです。

See the Pen triming-image-3 by blue (@aoiBlue) on CodePen.0

IE以外はこれでいいです。IEなんて対応しないぜというクールでイかしてるサイトはこれにて終了です。

IEとかいう子に対応してあげるパターン

IE11でトリミングしないといけないパターンもあると思います。
そういう場合は、positionとtransformを上手く使ってあげれば上手くできます。

その例が以下

See the Pen triming-image-2 by blue (@aoiBlue) on CodePen.0

何か指定だけ見ると50%ずつずらして-50%しているので、元に戻っちゃうように見えます。
ここで何をやっているか、ぶっちゃけ言葉だけだと説明してもよくわかんないので動いてもらいました。
hoverすると動きます。スマホは許してください。

See the Pen triming-image-move by blue (@aoiBlue) on CodePen.0

最初の指定では、素直に親要素のサイズの50%(半分)まで動いていると思います。
そこからtranslateを使って画像をずらしていますが、そこで-50%しているけど親要素の半分も移動していない(もしくはそれを超えて移動している)ことに気が付くかと思います。
つまり、translateで指定する％は親(相対指定している)要素からのサイズではなく、自分の要素（この場合画像）サイズに対しての半分になります。
そのため、上手いことトリミングされるという仕組みになっています。

まとめ

以上、positionとtransformを使った中央寄せしたトリミング方法(という言い方でいいのだろうか？)でした。
とはいえ、ぶっちゃけ「object-fit」使えば良いです。IE11はいずれ死にますしMSもEdgeに乗り換えてください・・・お願いします・・・って言ってるので。
ただ、これを上手く使えば、あえて左寄せ、右上寄せなど細かい指定も出来るようになるので、覚えておいて損はないと思います。