关于CSS3 object-position/object-fit属性的使用

时间:2024-09-22 20:34:02

object-position/object-fit属性一般用在替换元素上。

什么叫替换元素?

不是所有元素都叫“替换元素”。在CSS中,“替换元素”指的是:

其内容不受CSS视觉格式化模型控制的元素,比如image, 嵌入的文档(iframe之类)或者applet

比如,img元素的内容通常会被其src属性指定的图像替换掉。

替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率。

比如一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。

另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。

CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。objectvideotextareainput也是替换元素,audiocanvas在某些特定情形下为替换元素。

使用CSS的content属性插入的对象是匿名替换元素。

也就是说,本文的object-positionobject-fit只针对替换元素有作用,也就是form表单控件系列,img图片,HTML5的video视频等元素

一、object-fit的理解

它具体有五个值:

object-fit: fill;
  • fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
  • contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此,此参数可能会在容器内留下空白。
  • cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸,宽度和高度至少有一个和容器一致。因此,此参数可能会让替换内容(如图片)部分区域不可见。
  • none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
  • scale-down: 中文释义“降低”。就好像依次设置了nonecontain, 最终呈现的是尺寸比较小的那个。

注:object-fit功能类似于background-size

当我们想用视频作为网站的背景时,你肯定会想到用html5的video这个标签,但你会发现,给它设置宽度和高度为100%时,不会占满全屏,会有一块空隙,

这时你就可以使用object-fit这个属性了。

二、object-position的理解

object-position: 100% 100%;

object-position就是控制替换内容位置的。功能类似于background-position

原教程地址:http://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/