CSS3 Object-fit和Object-position

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

响应式设计(RWD)中,令大家最头痛的问题的是图片的自适应处理问题。往往我采取的处理方式是给图片的容器设置一个尺寸,然后给图片设置下面的代码:

img {
    max-width: 100%;
    height: auto;
}

但往往需要处理的只止于此。你可能想要让图像长宽比例来填充他的整个容器,和想重新定位他的中心位置。或者,如果你想按长宽比例响应式调整iframe,你可能会真正的碰到麻烦。当然也有修复的方法,但所有人都在说:

媒体调整的行为将会失控!

是的,现在我们将要解决这个问题。CSS标准提出属性object-fitobject-position可以解决这样的问题。

Chris Mills在2011年发表了一篇The CSS3 object-fit and object-position properties,文章中详细介绍了object-fit和object-position属性的使用。今天我们也将深入学习和了解这两个属性的具体使用。

功能简介

在CSS中,替换元素(replaced elements),如<img><video>元素一直存在长宽比的控制问题,特别在在响应式设计中,如何在不同设备,不同分辨率下对这些元素的长宽进行响应。例如,您可能想不以图片的正确尺寸,不想扭曲图像,也不想失去图像的长宽比例,让图片占据一定的空间。按照长宽比例调整和缩略图像的画面比挤压和拉伸图像是一个更优雅的解决方案。

在CSS3中我们可以使用object-fitobject-position来处理。“object-fit”属性指定了替换元素的内容应该如何使用他的宽度和高度来填充其容器。“object-position”属性指定了替换元素在容器中的对齐方式。

语法和取值说明

欲要了解这两个属性的具体使用,我们先从其语法和属性值作用入手。

object-fit语法

object-fit属性的语法非常的简单:

object-fit:fill | contain | cover | none | scale-down

object-fit取值说明

object-fit主要适合于替换元素,比如:<video><object><img><input type="image"><svg><svg:image><svg:video>等。其默认值为fill。object-fill取值的说明如下:

  • fill:此值为boject-fit的默认值,替换内容的大小被设置为填充元素的内容框,也就是说,元素的内容扩大到完全填充容器的外形尺寸,即使这打破其内在的宽高比。
  • contain:替换元素内容大小保持长宽比例填充元素内容容器,其具体对象大小被解析为一个包含元素的宽度和高度。也就是说,如果你在替换元素上设置一个明确的高度和宽度,此值将导致内容大小,完全在固定的比例显示,但仍在元素尺寸内显示。
  • cover:替换元素内容大小保持长宽比例填充元素内容容器,其具体对象大小被解析为覆盖整个元素的宽度和高度。也就是说,替换元素内容大小保持长宽比,但改变宽度和高度,以便完全覆盖内容元素。
  • none:替换元素内容不调整大小以适应内部元素的容器,内容完全忽略设置在元素上的任何高度和权重,并且仍在元素尺寸内显示。
  • scale-down:当内容大小设置了noncontain,将导致具体对象变得更小。

来看官网提供的一个效果示意图:

CSS3 Object-fit和Object-position

object-position语法

object-position的语法和CSS中的background-position非常的类似:

object-position: <position>

其主要适用于替换元素,如:<video><object><img><input type="image"><svg><svg:image><svg:video>

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/css3-object-fit-and-object-position-properties.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部