【css】imgタグをbackgroundのように扱える「object-fit」プロパティ

画像をいい感じに要素内に配置するときにbackgroundを使えばトリミングっぽいことができるんだけどimgタグで「object-fit」プロパティを使って同じことができるみたいなので使った時の備忘録

使い方

imgタグとcssで指定するだけで指定した高さと幅の中にいい感じに収まる

img{
  height: 300px;
  width: 300px;
  object-fit: contain;
  object-position: center;
}
<img src="https://picsum.photos/seed/picsum/1000/500" alt="" />

backgroundの使い方とほぼ一緒で、object-fit: cover;にすれば縦横比を維持した状態でいい感じ要素内いっぱいに収まる

↓こんな感じでいい感じに収まる(object-fit: contain;)

ただし、「object-fit」プロパティはIEで対応していない

IEでは「object-fit」プロパティは対応していないので、「object-fit-images」というscriptファイルを使うのとfont-familyで指定する必要がある

<style>
img{
  height: 300px;
  width: 300px;
  object-fit: contain;
  object-position: center;
  //↓追加
  font-family: 'object-fit: contain';
}
</style>
//↓追加
<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js"></script>
<script>
  objectFitImages();
</script>

<img src="https://picsum.photos/seed/picsum/1000/500" alt="" />

css1行追加するのと、scriptファイルの読み込みと呼び出しのコードを書けば動く

終わり