对象适应 | CSS 技巧

object-fit 属性定义了元素如何响应其内容框的高度和宽度。它旨在与 object-position 属性结合使用，用于图像、视频和其他可嵌入媒体格式。单独使用时，object-fit 允许我们通过提供对图像在其框内如何压缩和拉伸的细粒度控制来裁剪内联图像。

object-fit 可以使用以下五个值之一设置

fill：这是默认值，它会拉伸图像以适合内容框，而不管其纵横比如何。
contain：增加或减小图像大小以填充框，同时保持其纵横比。
cover：图像将填充其框的高度和宽度，再次保持其纵横比，但通常会在这个过程中裁剪图像。
none：图像将忽略父级的高度和宽度，并保留其原始大小。
scale-down：图像将比较 none 和 contain 之间的差异，以便找到最小的具体对象大小。

以下是如何设置该属性

img {
  height: 120px;
}

.cover {
  width: 260px;
  object-fit: cover;
}

由于第二张图像的纵横比与左侧的原始图像不同，因此它将在其内容框的范围之外拉伸，裁剪图像的顶部和底部部分。

值得注意的是，默认情况下，图像在其内容框内居中，但这可以通过 object-position 属性更改。

演示

下面的演示展示了五个示例，详细说明了我们可能希望图像如何挤压到内容框中，该内容框有时比其原始宽度小或大（调整浏览器以更好地了解这可能如何工作）

查看笔 object-fit 由 Robin Rendle (@robinrendle) 在 CodePen 上创建。

如果图像的内容由于某种原因未填充内容框，则未填充的空间将显示元素的背景，在本例中为浅灰色背景。

其他资源

浏览器支持

值得注意的是，iOS 8-9.3 和 Safari 7-9.1 支持 object-fit 属性，但不支持 object-position。

此浏览器支持数据来自 Caniuse，其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。

桌面

Chrome	Firefox	IE	Edge	Safari
32	36	否	79	10

移动设备/平板电脑

Android Chrome	Android Firefox	Android	iOS Safari
127	127	4.4.3-4.4.4	10.0-10.2

Loque

# 2015年7月23日

这个 polyfill 是个谎言！除了 Portal 的引用之外，在撰写本文时，polyfill 目前在 IE 中不起作用，这对我很可惜，因为我不得不编写一些 JS 来继续使用这个美丽的 css 属性。

Chris

评论永久链接# 2015年10月22日

我也是这样。polyfill 的全部意义在于让 IE/Edge 变得友好。我已经在 IE/Edge 开发者论坛上提出了这个问题 (https://dev.modern.ie/platform/status//)。我们作为社区应该让 MS 知道我们真正想要的功能。它现在处于“考虑中”状态。
Federico Brigante

评论永久链接# 2016年4月11日

有一些完美工作的 polyfill
* 针对图像：https://github.com/bfred-it/object-fit-images
* 针对视频：https://github.com/jonathantneal/fitie

Bernhard

# 2015年10月28日

以防万一有人需要 IE9、IE10、Edge 的 hack 解决方案，我有一个解决方法，它实际上并不会产生裁剪，但对我来说是 IE9+ 可接受的备用方案
…

…
…
// IE9 HACK
:root figure {
height:200px;
overflow:hidden;
}

      // IE10+ HACK
      _:-ms-lang(x), figure {
           height:200px;
           overflow:hidden;
      }
      figure {
           img {
                width:33%;
                height:200px;
                object-fit:contain;
                object-position:0 0;

           }
           // IE9 HACK
           :root img {
                height:auto;
                width:auto;
           }  

           // IE10+ HACK
           _:-ms-lang(x), img {
                height:auto;
                width:auto;
           } 
      }

…

John Darling

# 2015年12月9日

也许我错过了什么……我看不出这个属性有什么好处？流体图像会填充父容器并保持纵横比。它们可以使用“text-align”属性水平对齐，使用“vertical-align”属性垂直对齐。唯一的例外是，如果有人希望图像被父元素裁剪（object-fit: cover）。

Andrew Douglass

评论永久链接# 2016年3月9日

我之所以想使用它，正是因为你说的。我正在用响应式图像替换一些使用 css 背景图像的内容，我需要在它们上使用 object-fit:cover。也许有人会在 css 规范中提出 srcset 作为背景图像的替代方案。=)
Alex

评论永久链接# 2017年3月17日

考虑一下博客文章的特色图像。如果由于设计限制，您使用 `background-image` 作为唯一显示图像的方式，那么当文章在社交媒体上分享或在 Google 搜索中显示时，该图像将不会作为元数据显示。

您可以获得 `background-image` 的布局优势，同时使用图像，而不会牺牲您需要在网站外部显示帖子时才能使用的那些数据。

Phuong

# 2015年12月14日

感谢您的技巧

kathir

评论永久链接# 2016年1月30日

object-fit css 在 IE 浏览器中不起作用。请尽快提供任何替代解决方案。

Joey

# 2016年2月19日

上面有三个评论提到一个 IE hack，看起来很靠谱。我还没有开始使用“IE 现在可以用了”这个说法，所以我不确定它是否真的靠谱，但它似乎值得一试。

Rachel Bratt Tannenbaum

# 2016年2月21日

很棒的文章:) 我喜欢 object-fit！当我将网站样式设置为符合我的设计时，它让我的生活变得轻松。原生 LG 和三星浏览器也不支持 object-fit。polyfill 对它们非常有效。

Constance

# 2016年2月23日

我真的很喜欢使用 object-fit 而不是内联背景图像，所以我花了一两个小时来想出一个适用于 IE Edge 和其他不支持浏览器的 jQuery polyfill。请随意查看它（如果您发现任何问题，请随时贡献！)

https://github.com/constancecchen/object-fit-polyfill

或者，您也可以查看 Primož Cigler 的解决方案，它将图像设置为父容器的背景图像。 https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3#.sqaa2ssg4

Erik Woods

评论永久链接# 2017年11月30日

Constance，你的 polyfill 太棒了。非常感谢你。我尝试过的其他 polyfill 对我的情况不起作用。

Jen

# 2017年6月21日

非常感谢你（object-fit: contain）。在控制我的 CPT 中的特色图像大小方面，它就像梦一样有效。

Mosne

# 2018年1月26日

FYI https://jsfiddle.net/trixta/x2p17f31/ 这个演示在 IE11 上运行；)

Mosne

# 2018年1月26日

https://github.com/aFarkas/lazysizes 还支持 object-position！

.is-contain.imagecontainer .imagecontainer-img {
  object-fit: contain;
  object-position: 0 0;
  font-family: "object-fit: contain, object-position: 0 0";
}

Abdul

# 2020年4月10日

我们可以在背景图像上应用 object-fit 吗？我已经尝试了 3 天来缩小背景图像，但它在手机和笔记本电脑上显示了完全不同的图像部分

Ephrem

评论永久链接# 2020年5月28日

@Abdul 我认为您要找的东西将由 CSS 属性 background-size (https://css-tricks.org.cn/almanac/properties/b/background-size/) 和 background-position (https://css-tricks.org.cn/almanac/properties/b/background-position/) 解决。

David Waterman

# 2021年2月19日

使用 `contain`，如何找出生成的缩放图像大小？图像会根据屏幕和图像的方向以不同的方式约束，因此找出它并非易事；由于浏览器已经完成了工作，img 元素上是否没有表示缩放尺寸的属性？

Gratisinserate

# 2022年2月22日

关于在 img 元素和 CSS 背景之间进行选择时的辅助功能影响的提醒：如果图像纯粹是装饰性的，那么请使用 CSS 背景。否则，img 更合适。

演示

相关属性

其他资源

浏览器支持

桌面

移动设备/平板电脑

评论

发表回复 取消回复

发表回复取消回复