logo标签列表

“object-fit: cover”和“background-size: cover”的区别是什么？

htmlcssimage
16

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

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

4
“background-size: cover” 在响应式设计方面有更好的支持，效果同样出色。此外，“不要使用 <img> 元素作为背景”的陈旧观点也适用于它。 - BoltClock
在提出新问题之前，您可能会看到这个问题，先去看一下吧 ;) - Driss Baidou
4
很不幸，这使得这个问题落入了“观点”领域，而这是不在讨论范围内的。 - Paulie_D
3
你应该询问技术差异，这是一个主题相关的问题。询问优缺点是基于个人看法的。 - BDL
取决于您是否想要打印图像，以及是否希望它成为屏幕阅读器页面的一部分，最后还要考虑是否需要支持IE（大多数对象适配填充都会回退到背景大小）。 - Pete
显示剩余2条评论
1个回答
12
除了其他人提到的兼容性问题（现代浏览器都支持background-size: cover，而object-fit: cover则不是），使用带有background-size: cover属性的div元素可能会产生意外的副作用，即如果用户尝试打印您的页面，由于浏览器将其视为背景并忽略它，很多时候图像将无法被打印。这可能对您来说完全无关紧要，但需要注意。
虽然有一些解决方法，但我不知道是否有单一、跨浏览器的万能方法。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接