object-fit 图片自适应css属性介绍

object-fit 属性是一个 CSS 属性，用于定义替换元素（如 img、video、iframe 标签等）内部内容的尺寸调整方式。

它可以控制替换元素内部内容（例如图像或视频）在其容器中的尺寸适应方式，以保持原有的宽高比或填充满容器。

object-fit 属性可以具有以下几个值：

1. fill：默认值，将内容拉伸或压缩以填充容器的尺寸，可能会导致内容的宽高比例失真。
2. contain：将内容等比例缩放以适应容器的尺寸，保持内容的宽高比例，可能会在容器内留有空白区域。
3. cover：将内容等比例缩放以覆盖容器的尺寸，可能会导致内容超出容器的部分被裁剪。
4. none：内容保持原始尺寸，不进行任何缩放或调整。
5. scale-down：内容的尺寸按照 none 和 contain 中的较小值来调整，即根据内容的尺寸和容器的尺寸进行比较决定最终尺寸。

使用 object-fit 属性可以方便地控制替换元素内部内容的显示方式，使其在容器中以期望的方式适应并展示。