CSS:画像トリミング

画像の一覧を表示するときなどに、画像サイズが統一されていないが為に、
コーディングに苦労した経験はおありではないでしょうか。

今回は、そんなときに便利なCSSプロパティをご紹介します。

その名も「object-fit」

こやつ、画像の縦横比を維持しつつ、トリミングしてくれるすげえ奴です。

たとえば、こんな画像があったとします。

縦長と横長の画像を正方形でトリミングするには、

img.sample {
  width: 250px;
  height: 250px;
  object-fit: cover;
}

こうなります。すごい！便利！

で、サポートブラウザですが、いつも通り「Can I Use」を見てみると…

例によってIE系は全滅です。残念でしかない…。

IEの対応策や、詳細については下記のページで解説されています。

参考：http://www.webcreatorbox.com/tech/object-fit/