img要素をobject-fitで自由な大きさにトリミングする

今まではimg要素には「max-width:100%」を指定して、レスポンシブレイアウトに対応させて来ました。俗に言うフルードイメージです。
画像の縦横比（アスペクト比）が一定の場合はフルードイメージでいいのですが、柔軟なレイアウトの場合は「object-fit」を使う事で、画像の縦横比をコントロールする必要があります。

フルードイメージ

フルードイメージは画像の縦横比が一定のレイアウトやPCファーストから作る場合に向いています

See the Pen
fluid img by yachin29 (@yachin29)
on CodePen.

object-fit

object-fitはレイアウト毎に画像の縦横比が変わる自由なレイアウトやモバイルファーストで作る時に向いています。

See the Pen
object-fit by yachin29 (@yachin29)
on CodePen.