使用“背景尺寸：封面”的 CSS 背景不适合整个高度答案

【问题标题】：CSS background using "background-size: cover" doesn't fit the full height使用“背景尺寸：封面”的 CSS 背景不适合整个高度
【发布时间】：2013-07-18 01:13:11
【问题描述】：

我正在制作一个仅显示 SVG 图像的页面，以下是要求：

矢量应该占据整个窗口
矢量应保持其纵横比（在 SVG 文件本身中定义）
矢量应裁剪/剪辑以防止歪斜

CSS...

body {
  background: url(/path/to/image.svg);
  background-size: cover;
}

...几乎完美地工作，只是当浏览器窗口变得太窄时，它会平铺而不是裁剪/剪裁。

这里是一些截图（请忽略dabblet留下的文物）：

这里的窗口接近原始图像的纵横比

这里的窗口比纵横比“短”，并且图像正在裁剪（根据需要）。

这里的窗口比纵横比“更窄”，但图像不是裁剪，而是平铺（不受欢迎）。

这是我的一些想法......

我能否以某种方式更改 SVG 图像以防止这种情况发生？
我可以对页面进行标记/设置样式以达到预期的效果吗？
我更愿意保留在 HTML/CSS 领域，但如果需要 Javascript，那就这样吧。

这是我正在使用的 dabblet...http://dabblet.com/gist/6033198

【问题讨论】：

css中的背景会自动平铺，只需使用background-repeat: no-repeat;
@pebbl 你是对的，background-repeat 会阻止向量重复，但这并不能解决向量的 y 维度没有正确计算的事实。图像应填充窗口的 y 维度。
+1 啊，你的问题没有让我找到你想要的答案。对于未来的搜索者，我是否可以建议您将这个问题重新命名为“背景尺寸：封面”不覆盖整个窗口。 SVG 元素具有误导性，因为图像具有相同的行为，“防止重复”部分也是如此。基本上，您的假设是 body 和 html 尺寸填充了整个窗口，但情况并非总是如此 - 正如您现在所知道的 - html 和 body 在它们的行为方式上是奇怪/特殊的元素。

标签： svg css

【解决方案1】：

经过反复试验，这就是我发现的。

添加（到原始 CSS）：

html {
  height: 100%
}

完全符合我在原始规范中的要求。

此外，如果我希望图像在裁剪时居中，我可以使用：

html { 
  background: url(path/to/image.jpg) no-repeat center center fixed; 
  background-size: cover;
}

最后，如果我希望它居中，请始终保持纵横比，但不要裁剪（即，一些空白是可以的）然后我可以这样做：

body {
  background: url(/path/to/image.svg) no-repeat center center fixed;
  background-size: contain;
}

【讨论】：

【解决方案2】：

对我来说，我设置了除background-attachment:fixed 之外的所有其他属性。多年来，我在自己的网站上遇到过同样的问题，这是我遇到过的最难以捉摸和令人愤怒的错误之一，但将其添加到 html 元素似乎终于为我解决了。

【讨论】：

【解决方案3】：

这个 css 工作正常。谢谢

"background-size: contain;"

.cover{background:url(images/cover.jpg) no-repeat top center; display:inline-block; width:100%; height:400px; background-size: contain;}

<div class="cover">&nbsp;</div>

【讨论】：