使用"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;
}