关闭

object-fit和object-position_定义图片和视频元素在容器内如何显示的css属性

时间: 2021-02-08阅读: 192标签: 图片

当我们给img标签加上固定的宽和高时,img标签中的图片会默认被拉伸变形,如图:

<body>
<img src="./demo.jpg" alt="">
<style>
    img{
        width: 300px;
        height: 150px;
    }
</style>
</body>


图1-给img元素加上固定宽高后图片被拉伸变形

如果我们需要让该元素占据固定的宽高大小,而又不希望图片被拉伸变形,可以在img标签外套一个div(或其他父级元素),然后将固定的宽高加在父级元素上,这样img标签本身就可以只设定宽或高,让另一边自适应。除此之外,还可以将该图片作为元素背景,然后通过background-size和background-position等背景相关样式属性来设置该图片显示的位置和大小。
但这些方法要么看上去颇为不便,要么并不适用于video标签中的视频元素。
为了更好且更方便地解决这类问题,我们可以使用接下来的这两个css属性——object-fit和object-position。


1.object-fit

css属性object-fit一般用在img或video标签上,定义了元素内容要如何适应容器的宽高,IE15及以前的版本不支持此属性。


常用属性值:

object-fit: fill;

默认值,内容可能会被拉伸以完全适应容器的宽高。和不使用该属性的效果一致。
示例:

<style>
    img{
        width: 300px;
        height: 150px;
        object-fit: fill;
    }
</style>


图2-设置“object-fit: fill;”效果与不使用该属性一致,图片会被拉伸以完全适应元素宽高

object-fit: cover;

保持内容的原有宽高比例进行缩放,让图片的内容能够完全覆盖元素容器,图片可能会被剪切掉一部分。
示例

<style>
    img{
        width: 300px;
        height: 150px;
        object-fit: cover;
    }
</style>


图3-可以看见图片没有被拉伸,显示出来的部分在原图中处于中间位置

object-fit: contain;

保持内容原有宽高比例进行缩放,使内容能够完全呈现出来。
示例:

<style>
    img{
        width: 300px;
        height: 150px;
        object-fit: contain;
    }
</style>


图4-设置“object-fit: contain;”后图片会在img标签内按原有比例进行缩放,使图片全部显示出来,可以看见图片默认显示在容器正中间

object-fit: scale-down;

保持内容的原有宽高比例进行缩放,显示的效果将与属性值分别为none和contain时内容尺寸较小的那个相同(contain的效果见上方,none的效果见下方)。
示例

<style>
    img{
        width: 300px;
        height: 150px;
        object-fit: scale-down;
    }
</style>


图5-可见在这个例子中,当object-fit属性值为contain时图片的显示尺寸更小,所以scale-down属性值与contain属性值效果相同

object-fit: none;

保持元素内容原有的尺寸宽高,不会进行缩放,元素内容可能填不满容器,也可能会被剪切掉一部分。
示例

<style>
    img{
        width: 300px;
        height: 150px;
        object-fit: none;
    }
</style>


图6-图片内容保持了原有的宽高尺寸,因为原图过大所以没有完全显示出来,显示出来的部分在原图中处于中间位置

object-fit: initial;

将该属性的属性值设为默认值(object-fit属性的默认属性值是fill)。
示例

<style>
    img{
        width: 300px;
        height: 150px;
        object-fit: initial;
    }
</style>


图7-将object-fit设为默认值,显示效果与fill相同

object-fit: inherit;

从父元素继承该属性的值。
示例

<body>
<div>
    <img src="./demo.jpg" alt="">
</div>
<style>
    div{
        object-fit: contain;
    }
    img{
        width: 300px;
        height: 150px;
    }
</style>
</body>


图8-只有父元素添加了object-fit属性为contain,img标签未添加该属性时的显示情况

<style>
    div{
        object-fit: contain;
    }
    img{
        width: 300px;
        height: 150px;
        object-fit: inherit;
    }
</style>


图9-子元素img的object-fit属性设为inherit后,从父元素继承了该属性的值


2.object-position

object-position属性常与object-fit一起使用,一般用于img和video标签,它规定了元素内容在容器内显示的位置,默认为居中。该属性同样不被IE15及以前的浏览器支持。

常用属性值:

position

指定内容在容器中的具体位置,第一个值指定内容在x轴上的位置,第二个值指定内容在y轴上的位置,默认都是50%,两个值之间通过空格隔开。第二个值可以省略,如果省略则取默认值为居中。可用的表示位置的形式有:

x%

可以用百分比来表示内容在容器中显示的位置。
示例

<body>
<img src="./demo.jpg" alt="">
<style>
    img{
        width: 300px;
        height: 150px;
        object-fit: contain;
        object-position: 100% 0%;
    }
</style>
</body>


图10-object-fit属性值为“contain”时,内容的高撑满容器,此时object-position的第二个表示y轴位置的值无论是百分之几都不会影响内容显示的位置(但如果是具体的距离则可以)。同理,当object-fit值为“cover”时,内容的宽撑满容器,object-position的第一个表示x轴位置的值无论是百分之几都不会影响内容显示的位置,这里不再做测试。

left/right/top/bottom/center

可以使用方位值进行设置。
示例

<style>
    img{
        width: 300px;
        height: 150px;
        object-fit: contain;
        object-position: right bottom;
    }
</style>


图11-同百分比一样,当内容的高(或宽)撑满容器的高(或宽)时,第二个(或第一个)方位值不会影响内容显示的位置。这里第二个方位值无论是“top”还是“bottom”、“center”,图片的位置都不会发生改变。

具体的距离(包括数值和单位)

还可以为内容的位置指定具体的x轴和y轴上的距离(包含数值和单位),以容器的左上角为(0,0)坐标,向右和向下分别为x轴和y轴的正半轴,可以设置负值。内容超出容器的部分可能会被剪切。
示例

<style>
    img{
        width: 300px;
        height: 150px;
        object-fit: contain;
        object-position: 50px 50px;
    }
</style>


图12-使用具体的距离进行设置可以准确明了的定位内容在x轴和y轴上的位置,内容超出容器的部分会被剪切

混合使用

指定内容在容器内的具体位置时,上述三种位置表示方法可以混合使用。
示例

<style>
    img{
        width: 300px;
        height: 150px;
        object-fit: contain;
        object-position: right 50px;
    }
</style>


图13-不同的位置表示方法可以混合使用,一样会生效

initial

设为默认值,object-position属性的默认值是“50% 50%”。
示例

<style>
    img{
        width: 300px;
        height: 150px;
        object-fit: contain;
        object-position: initial;
    }
</style>


图14-object-position属性值默认为居中显示

inherit

从父元素继承属性值。
示例

<body>
<div>
    <img src="./demo.jpg" alt="">
</div>
<style>
    div{
        object-position: left;
    }
    img{
        width: 300px;
        height: 150px;
        object-fit: contain;
        object-position: inherit;
    }
</style>
</body>


图15-img标签可以从父元素div处继承object-position的属性值,如图,图片不再默认居中显示,而是和div元素样式中定义的一样靠左显示


写在最后

以上为全部内容,感谢阅读。
本博文仅为学习记录和分享交流,如有错漏,还请帮忙指出,也欢迎更多补充,不胜感激。

GitHub地址:https://github.com/ljxlijiaxin.
来自:https://www.cnblogs.com/ljxlijiaxin/archive/2021/02/07/14385149.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/10147

图片压缩工具推荐

为什么要压缩图片?如果你是web开发者:减小网页、小程序的体积,提升加载速度。如果你是App开发者:减小App的打包体积,提升下载速度。如果你是新媒体从业者:文章体积更小,加快打开速度。如果你是职场用户:邮件附件超限、微信发送太慢,你总会遇到

CSS object-fit 对图片的处理

object-fit:指定可替换元素的内容应如何适应到需使用的高度和宽度确定的框,平时写代码经常会在代码中插入图片,你是否会多少感觉插入的图片被拉伸或是被缩放

Js淘宝放大镜实现

这个功能是我在模仿淘宝详情页的时候做出来的;图片的引用是一个大图,一个小图;传输用的ajax,记得改成自己的ip地址,js和html都改一下。制作一个类似于淘宝的放大镜效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

前端获取图片exif信息

对又是我,每天都有新的需求。这次的需求是上传图片的时获取图片的宽高、设备、光圈等信息。pc、android、ios 都支持了,现在就缺少 web 这边上传的图片了。

前端图片压缩上传(纯js的质量压缩,非长宽压缩)

此demo为大于1M对图片进行压缩上传,若小于1M则原图上传,可以根据自己实际需求更改。demo源码如下:

前端开发中对图片的优化技巧有哪些?

除了内容图片,其他的图片的作用是修饰,也就是对于传达信息来说并非本质性的。最大的优化就是压根不要图片!所以在优化之前要做的,首先是确认设计,设计本身是否需要用那么多图片?还是说可以更简洁?

css多个img标签存在间隙的解决方法总汇

在网上整理了一些解决多个img标签存在间隙的方法:多个img标签写在一行、将要闭合标签的地方与开始标签的地方重合、在img标签的父级上写:font-size:0;这个在解决display:inline-block出现的问题也有帮助、使用display:block(img是内联元素)要float一下才行

图片该如何优化来提高网站性能?

图像是web上提供的最基本的内容类型之一。他们说一张图片胜过千言万语。但是如果你不小心的话,图片大小有时高达几十兆。因此,虽然网络图像需要清晰明快,但它们尺寸可以缩小压缩的,使用加载时间保持在可接受的水平。

图片加载失败后CSS样式处理最佳实践

如果因为网络或者跨域限制等原因无法正常加载,在默认情况下会显示浏览器默认的“裂开”的图片效果,如果设置了 alt 属性值,则 alt 属性对应的内容也会一并显示。例如

图片懒加载及异常处理

在日常页面开发中,常常会涉及到图片的展示。有时候当图片资源过多时,我们希望能将图片延迟加载,同时当图片加载失败后,能用一张默认图片去代替其进行展示

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!