选择啥：<img> with object-fit:cover vs background-size:cover？ [关闭]

Posted 2023-03-05

【中文标题】选择啥：<img> with object-fit:cover vs background-size:cover？ [关闭]

【英文标题】：What to choose: <img> with object-fit:cover vs background-size: cover? [closed]选择什么：<img> with object-fit:cover vs background-size:cover？ [关闭]

【发布时间】：2019-02-28 22:33:22

【问题描述】：

我需要在其中一个元素上设置“封面”背景。

使用 CSS background-size: cover 与实际使用 img 和 object-fit: cover 的优缺点是什么？

据我所知，我可以通过 srcSet 和尺寸在响应性方面更好地控制 img。但它在没有 polyfill 的 IE11 中不起作用。

【问题讨论】：

background-size：cover 得到了更好的支持，并且在 RWD 部门也同样出色。加上古老的“不要使用 元素作为背景”。

你可能会看到this question，然后再问一个新的，看看;)

一方面，它们用于不同的元素。

不幸的是，这将其推向了题外话的opinion 领域，

您真的应该询问技术差异。这似乎是一个主题问题。询问利弊是基于意见的。

【参考方案1】：

除了其他人所说的兼容性（background-size: cover 在所有现代浏览器上都支持，而object-fit: cover 不支持）之外，将div 元素与background-size: cover 一起使用的副作用是，如果用户尝试打印您的页面，很多时候图像不会被打印，因为它会被浏览器视为背景并被忽略。

这对您来说可能根本不重要，但需要注意这一点。

有some ways to get around this，但我不知道单一的跨浏览器银弹方法。