CSS3 object-position/object-fit

[lazyken]

内容搬运整理自张鑫旭大佬的博客

object-fit

object-fit该CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

替换元素举例：
比如，img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度，从而也有固有的宽高比率。src指向的图片属于替换内容，注意，这个替换内容和这个img替换元素是壳子与内容的关系，两者是独立的。object-fit控制的永远是替换内容的尺寸表现。
粗浅理解的用法：object-position/object-fit和background-position/background-size作用类似，使图片缩放或者剪裁图片。当有多个图片，且大小、比例都不相同时进行图片处理。

object-fit有5个属性值：fill、contain、cover、none、scale-down

• fill：默认值。被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比，那么该对象将被拉伸以适应。
• contain：保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
• cover：保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
• none：被替换的内容尺寸不会被改变。
• scale-down：内容的尺寸就像是指定了none或contain，取决于哪一个将导致更小的对象尺寸。
• object-fit效果

object-position

object-position控制替换内容位置的。默认值是50% 50%，为居中效果。要实现尺寸大小不固定图片的垂直居中效果，可以试试object-fit。

• object-position效果

calc() 函数用于动态计算长度值。

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
• 任何长度值都可以使用calc()函数进行计算；
• calc()函数支持 "+", "-", "*", "/" 运算；
• calc()函数使用标准的数学运算优先级规则；

background-size

规定背景图像的尺寸：

div {
  background:url(img_flwr.gif);
  background-size:80px 60px;
  background-repeat:no-repeat;
}

语法：background-size: length|percentage|cover|contain;

值	描述
length	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
percentage	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

background-position

如何定位背景图像：

可能的值

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。 默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值，另一个值将是50%。 您可以混合使用 % 和 position 值。