CSS中的object-fit和background-size

上面文章总结了下img标签和background-image的区别，这篇文章介绍一下其相关属性。

object-fit  CSS属性指定可替换元素（例如：<img> 或 <video>）的内容应该如何适应到其使用高度和宽度确定的框。object-fit的默认值是fill，这可能导致图像被挤压或拉伸。

object-fit的可能值：

object-fit: contain
在这种情况下，图像的大小将被调整以适应其容器的长宽比。如果图像的长宽比与容器的长宽比不一致，它就会被“黑边化”。当使用object-fit: contain时，图像将被黑边化或相应调整大小。

object-fit: cover
这里，图像也将被调整大小以适应其容器的长宽比，如果图像的长宽比与容器的长宽比不一致，那么它将被剪切以适应。当使用object-fit: cover时，图像将被剪裁以适应或相应地调整大小。

object-fit: fill
使用这个，图像将被调整大小以适应其容器的长宽比，如果图像的长宽比与容器的长宽比不一致，它将被挤压或拉伸。当使用object-fit: fill时，图像将被相应地挤压、拉伸或调整大小。

object-fit: none
在这种情况下，图像根本不会被调整大小，既不会被拉伸也不会被挤压。它的作用与cover类似，但它不依赖于其容器的长宽比。

除了object-fit，我们还有object-position属性，它负责在其容器中定位图像。

object-position的可能值：

object-position属性的作用类似于CSS的background-position属性。大多数情况下，使用默认值（例如，"center "或 "50% 50%")。当容器的长宽比在垂直方向上较大时，top和bottom关键字也会起作用。

background-size设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

background-size的可能值：

background-size: auto
使用auto, 图像将保持其默认大小。默认尺寸有时可能会导致图像模糊（如果它太小）。

background-size: cover
图像将被调整大小以适应容器。缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 值相反，cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪。

background-size: contain
在这种情况下，图像将被调整大小以适应容器。如果长宽比不对，那么图像就会被黑边化。