background-size: cover是否可以拉伸背景图片？[重复]

Question

这个问题在这里已经有了答案:

background-size: cover;和 background-size: 100%;的区别是什么？ (3个答案)

封闭 3个月前.

是否 background-size: cover; 在CSS中拉伸一个背景图片？

Answer 1

它可以拉伸或收缩，这取决于图片& 背景大小，它将裁剪不符合div大小的多余部分。 它将裁剪不符合div大小的多余部分。400*250，而背景图片是 400*350. 如果您使用 background-size: cover覆盖所有背景，则需要 裁剪100px 额外的高度。

• 或者，如果你使用200*150的背景图，那么要覆盖所有的背景就需要将图片最小扩展到400*300(200:150=2:1.5，乘以2就是400*300，注意，如果高度增加，宽度也会按比例增加)

• 如果我们把图片200*150做成333.33*250，宽度将无法覆盖。(虽然高度也可以)

• 如果你使用的背景图片尺寸是800*500或200*125或相同比例，图片的任何部分都不会被剪掉，会将整个图片剪掉。

• 对于8000*500大小的图片，它将会被压缩到覆盖400*250大小的背景，不会削减任何部分，但图片会被压缩以适应。

最后，background-size cover属性会将图片放大或压缩，直到覆盖所有背景，它不在乎图片会有多浪费。

Answer 2

是的，它是这样做的。如果这不是你想要的，可以考虑使用containment。这里有一个简单的指南。

https:/www.w3schools.comcssrefcss3_pr_background-size.asp