使用“background-size：cover”的CSS背景不适合整个高度

Question

我正在创建一个只显示SVG图像的页面，以下是要求：

• 向量应该占据整个窗口
• 向量应保持其宽高比（在SVG文件中定义）
• 矢量应裁剪/剪辑以防止倾斜

CSS ......

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

... 几乎完美无缺，只是当浏览器窗口变得太窄时，它会拼贴而不是剪裁/裁剪。

以下是一些屏幕截图（请忽略dabblet留下的文物）：

此处窗口接近原始图像的宽高比

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

此处窗口比纵横比“更窄”，但不是裁剪，而是图像平铺（不需要）。

以下是我的一些想法......

• 我可以通过某种方式更改SVG图像以防止这种情况发生吗？
• 我可以对页面进行标记/样式化以获得所需的结果吗？
• 我更喜欢保留HTML / CSS的范围，但如果需要Javascript，那就这样吧。

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

Answer 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;
}

Answer 2

对我来说，我设置了除 def __bool__(self): return self.valor def __eq__(self, other): return True if self.valor == other else False def __not__(self): return not(self.valor) def __and__(self, other): return True if (self and other) else False def __or__(self, other): return True if (self or other) else False 以外的所有其他属性。我在我的网站上经历了相同的问题已有很长时间了，这是我遇到过的最难以捉摸和令人发指的错误之一，但是将其添加到background-attachment:fixed元素似乎终于为我解决了。 / p>

Answer 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>