object-fit

それぞれの値について

  • fill: 要素のボックス内における置換要素の中身を、ボックスに合わせて拡大または縮小します。アスペクト比は保持されません。
  • contain: 要素のボックス内における置換要素の中身を、ボックスに合わせて拡大または縮小します。アスペクト比は保持されます。
  • cover: 要素のボックス内における置換要素の中身を、ボックスに合わせて拡大または縮小します。アスペクト比は保持されます。ただし、ボックスよりも大きい場合は、余分な部分が切り取られます。
  • none: 置換要素の中身が、ボックス内でどのように表示されるかを制御する必要がない場合に使用します。
  • scale-down: containと同じように、要素のボックス内における置換要素の中身を、ボックスに合わせて拡大または縮小します。ただし、置換要素が元々ボックスよりも大きい場合は、fillと同じように拡大されません。

参考文献:
object-fit – CSS: カスケーディングスタイルシート | MDN – Mozilla Developer Network

タイトルとURLをコピーしました