画像のトリミング(object-fit)

  • 2022/05/03
  • HTML&CSS

contain ・・・縦横比を維持したまま要素のコンテンツボックスに収まるように拡大縮小。オブジェクト全体がボックス内に表示されるオブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、レターボックス表示。
  

cover・・・縦横比を維持したまま要素のコンテンツボックス全体を埋めるように拡大縮小。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が合うように切り取られる。
  

fill・・・要素のコンテンツボックス全体を埋めるサイズになります。オブジェクト全体が完全にボックスの中を埋める。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトは合うように引き伸ばされる。
  

none・・・拡大縮小なし
  

scale-down・・・noneとcontainのうち、小さい方のサイズに合わせて表示。
  

参考URL : https://www.webcreatorbox.com/tech/object-fit
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit