background-size: cover 是否拉伸背景图像？

Question

CSS 中的 background-size: cover; 是否拉伸背景图像？

Answer 1

是的。如果这不是您要查找的内容，请考虑使用 contain。这是一个简单的指南：

https://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 2

它可以根据图像和背景大小拉伸或收缩。 它将裁剪与 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，width不会被覆盖。 （尽管 身高还可以）

• 如果你使用的背景图片尺寸是800*500或者200*125或者与其等比例，图片的任何部分都不会被裁掉，会看到 整张图片

• 对于8000*500大小的图片，它会压缩到覆盖400*250大小的背景，没有任何部分会被裁掉，但图像会被压缩以适应。

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