css3图片剪切与背景剪切

Posted 2021-05-13 奇函数

object-fit：对图片进行剪切；

属性：{

1）fill：默认，不保证保持原有的比例，内容拉伸填充整个内容容器。

2）contain：保持原有尺寸比例。内容被缩放。

3）cover：保持原有尺寸比例。但部分内容可能被剪切。

4）none：保留原有元素内容的长度和宽度，也就是说内容不会被重置。

5）scale-down：保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

6）initial：设置为默认值。

7）inherit：从该元素的父元素继承属性。

}
《--------------------------------------------------------》、

背景尺寸

background-size;

属性：{

cover：把背景拉伸，适应整个盒子，可能导致有一部分图片显示不全；

contain：拉伸背景，只要有一边适应了盒子就马上停止，会导致盒子一部分没背景；

如果都设置100%，会让背景完全适应盒子。一个值代表宽，高。如果高是auto，则宽等比例缩放。

}

背景位置

background-origin;（起源）

border-box：把背景延伸至边框；

padding-box：把背景延伸至padding位置；

content-box：背景只在内容里边。

背景剪切区域

background-clip（剪辑）

border-box：把背景裁剪至边框区域；

padding-box：裁剪至内边距区域；

content-box：裁剪至内容区域。