【CSS覚書】画像を中央から任意の大きさでトリミングする方法

毎度でございます、えばさん（@Ebba_oBL）です。

こちらもたまにしか使わないのですぐ忘れるやつ

画像の縦横比が揃ってないモノを並べる時とか、明らかに元画像の比率とは違う比率で表示したい時、新たに画像を作り直すのがめんどくさいのですが、このプロパティで超簡単。

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

imgタグに object-fit: cover; と記述するだけで中央から自在にトリミングができます。

imgタグに直接指定するのがポイントでたまに親要素に記述してドツボっていたりします。

また、imgタグに与えるサイズは％やvwやvhでもOKなのでレスポンシブ対応も楽チンです。