图片缩放相关的css

background-origin:

该属性为background-position提供背景图的开始参考点，比如background-position为10px 20px,那这10px 20px是以谁（border-box、padding-box、content-box）进行移动呢？这就需要由background-origin来指定。

background-clip:

划定背景图的显示范围，超出范围的不让显示，默认为border-box。

background-size:contain|cover

cover:当背景图尺寸小于容器的尺寸时，等比例拉升背景图直至铺满容器，图片可能会被裁剪。

contain: 当背景图尺寸小于容器的尺寸时，以宽度比或高度比来拉升图像，使得容器可以显示完整的图片，浏览器的算法如下

假设图片(100，50)，那么如果容器size是（500，300），按照等比进行计算：

假设以宽度等比放大，该图片需要的容器为：500， 250（500/100 * 50)，在实际容器size内，图片可以展示完

假设以高度等比放大，该图片需要的容器为600,300，超出了实际的容器，图片无法展示

object-fit属性可以对图片进行缩放

必须为img元素同时指定宽、高并且值不能是auto(auto时缩放失效);当图片宽度为100%时，object-fit在safari上会生效，但是chrome上不会生效

• contain

保持宽高比，如果对象宽高比与容器的宽高比不匹配，该对象将被添加“黑边”。

内容等比例缩放，图片能完整显示在容器

• cover

保持宽高比，如果对象的宽高比与容器的宽高比不匹配，该对象将被"剪裁"。

内容等比例缩放，图片充满容器

始终会让图片充满容器,存在图片被等比放大的风险

• fill

不保证宽高比，如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。

不等比缩放，强制拉伸

• none

被替换的内容将保持其原有的尺寸。

• scale-down

内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。