css3 之image之object-fit作用

最新推荐文章于 2025-06-26 09:06:11 发布

csdn_xuebing

最新推荐文章于 2025-06-26 09:06:11 发布

阅读量5.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css3 文章标签： css3 image

本文链接：https://blog.youkuaiyun.com/csdn_xuebing/article/details/82952606

css3 专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了CSS中object-fit属性的五个不同值：fill、contain、cover、none和scale-down，解释了它们如何影响替换元素（如图片和iframe）在容器中的显示方式。从拉伸填满整个容器到保持原有比例，再到缩放至最小尺寸，每个属性值都有其独特的应用场景。

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

//默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
object-fit: fill;

//保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
object-fit: contain;

//保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。
//因此，此参数可能会让替换内容（如图片）部分区域不可见
object-fit: cover;

//保持原有尺寸比例。同时保持替换内容原始尺寸大小。
object-fit: none;

//最终呈现的是尺寸比较小的那个,类似于依次设置none或contain。
object-fit: scale-down;