css img标签如何拥有background的相关属性，object-fit,object-position_img 设置background-position: center;-CSDN博客

本文链接：https://blog.csdn.net/qq_42740797/article/details/122819392

当需要显示不同宽高比的图片时，CSS的background标签提供了object-fit和object-position属性以避免拉伸。本文介绍了如何使用CSS3的object-fit（fill, contain, cover, none, scale-down）和object-position属性，让img标签也能实现类似背景图片的调整功能，保证图片显示效果和定位。" 119670294,11254610,ArcGIS JS集成天地图详解,"['GIS开发', '地图服务', 'ArcGIS JS', '天地图API']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：

很多时候用户上传的图片跟我们显示的时候是不一致的，我们显示图片时是200*200（宽高比一致）。但用户的图片却是长宽比不一致的，有的时候长了，有的时候宽了。

解决方案：

这个时候background标签的优势就提现出来了，可以使用background-position：center将图片的显示位置居于正中心，也可以使用background-size：contain将图片完整的显示出来等等。

但回过头来看img标签，他就没有这个功能了，他只能设置图片的宽高。如果图片真实宽高跟显示的宽高不一致，就会出现拉伸的情况，所以今天给大家介绍一下css3的新属性，并减少无谓的将img换成background。

一、object-fit：

说明：指定元素的内容应该如何去适应指定容器的高度与宽度。也可以用于video标签。

属性值：

fill：默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
contain：保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
cover：保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
none:：保持原有尺寸比例。同时保持替换内容原始尺寸大小。

scale-down: 就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。