CSSでトリミング　object-fit

web上で画像の一覧を表示する時な、画像のサイズが同じの場合、並べても整ってくれますが、
それぞれの画像のサイズが同じではない場合、崩れたりしてしまいます。
ですが、すべての画像をリサイズする場合は時間がかかるということもあります。

そんな時はCSSでトリミングが可能です。
「object-fit」というプロパティーを使って、画像の縦横比を維持しながらトリミングする方法を紹介します。

横幅が400px、縦幅が300pxの画像の場合、下記のように指定すると縦につぶれたように表示されてしまします。

img {
  width: 200px;
  height: 200px;
  object-fit: cover; 
}

しかし、画像に対して object-fit: cover; を指定すると

img {
  width: 200px;
  height: 200px;
  object-fit: cover; 
}

縦横ともに200pxの画像としてトリミングして表示されます。

便利なプロパティですが、
object-fit、object-position プロパティーはIEやEdgeに対応していません。
対応させるには、object-fit-imagesを読み込ませる必要があります。

CSSで object-fit の記述とfont-family を指定します。
そして、IEに対応させるためのfont-familyに’object-fit: contain;’ を記述します。

.img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  font-family: 'object-fit: contain;'
}

上記でIEやEdgeで対応させることができます。