css3 之image之object-fit作用

CSS对象拟合属性详解

最新推荐文章于 2025-10-03 08:23:36 发布

原创最新推荐文章于 2025-10-03 08:23:36 发布 · 5.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #image

css3 专栏收录该内容

1 篇文章

订阅专栏

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

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

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

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

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

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