当前位置:Gxlcms > html代码 > object-fit和object-position_html/css_WEB-ITnose

object-fit和object-position_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:15人阅读

object-fit 和 object-position 是我最近最喜欢的两个CSS属性。他们使开发人员可以操作 img 或 video 中的内容,类似于我们可以用 background-position 和 background-size 操作背景内容一样。

首先,让我们深入探讨一下 object-fit

该属性定义一个元素,如 img ,如何适应容器的宽度和高度。我们可以用object-fit告诉内容以各种方式填充容器,如“保存该长宽比!” 或“向上伸展,尽可能多的占用空间!”

这里有一个案例:

这张图片的大小为 400px x 260px 。如果我们这样给图片设置样式...

img {    width: 200px;  height: 300px;}

...最后图片失真,因为图片为了适应容器已经被压扁。

当我们改变了 img 的高度和宽度时, img 的内容将占用我们所创建容器的所有可用空间,从而破坏了之前创建的的长宽比。

为了保持图像的长宽比,同时也可以填充空间,我们可以使用 object-fit :

.cover {  object-fit: cover;}

左侧是我们原始的图像,右侧图像已裁剪原图像的两侧以保持我们现在的长宽比!这看起来没什么特别之处,但一旦进入到缩放设计,那么 object-fit 就立马彰显其真正的威力。

让我们看另外一个案例:

在这里,我们有两个图像,我们希望他们分别占据浏览器 50% 的宽度(这样他们就可以并排),高度为 100% 。我们可以利用视窗单位:

img {  height: 100vh;  width: 50vw;}

问题是,当我们调整浏览器的大小时,就会改变图像的宽高比例,也就是会产生各种各样奇怪的现象。相反,我们希望就像前面的演示的一样,永远保持一样的宽高比例,其实我们完全也可以使用相同的办法。 object-fit:cover 就可以轻松的实现!

再次尝试调整浏览器的大小。就不会发生奇怪的宽高比的怪事,对不对?如果我们有不同尺寸的图像,这也是非常有益的,因为他们会通过容器做有效的裁剪。

cover 仅仅是 object-fit 属性的一个值,你可以在《 CSS3 Object-fit和Object-position 》一文中了解更多,但是迄今为止,它是我每天的开发中发现的最有用的值。

目标转移到另外一个属性上: object-position

我们将使用之前相同的图像以及使用如下的样式设置:

img {    background: yellow;  height: 180px;  object-fit: none;}

这里有两点需要注意的地方:为了使 object-position 能正常工作,我们需要声明一下图像尺寸。我们还需要将 object-fit 设置为 none ,以避免默认情况下,图像并没填满整个容器。这样做很有意义,因为即使你不声明,图像上 object-fit 属性也会默认为 fill 。

说到默认值,即使没有声明, object-position 属性也会在水平和垂直方向上平分:

img {  background: yellow;  height: 180px;  object-fit: none;  object-position: 50% 50%; /* even if we dont declare this the image will still be centered */}

第一个值表示图像左右移动,第二个值表示上下移动。我们可以用下面这些的值进行演示:

我们甚至可以将图像轻移至内容盒子内(content box),以方便显示我们之前设置的 background-color 。

但是这有什么用呢? 好问题!在最近的一个项目,我发现需要将一个图像移动到特定区域的中心,以抓住读者的注意力。在这种情况下,我们并不需要加载一个新的图像,所以我们不需要 元素,我们想要做的只是将图像移动一点点。

除了移动图像以达到焦点位置,我不知道这个属性还有什么实际意义。但我一直摆弄 object-position ,向您展示如何隐藏部分图像,然后显示点击部位,就像下面这个演示:

我还没有尝试将这个属性应用到

兼容问题

一般来讲,兼容性还不错!

人气教程排行