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

时间:2013-07-18 21:40:22

标签: svg css

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

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

CSS ......

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

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

以下是一些屏幕截图(请忽略dabblet留下的文物): window close to aspect ratio

此处窗口接近原始图像的宽高比 window "shorter" than aspect ratio

此处窗口比纵横比“更短”,并且图像正在裁剪(根据需要)。 enter image description here

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

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

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

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

3 个答案:

答案 0 :(得分:25)

经过一些反复试验,这就是我找到的。

添加(到原始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;
}

答案 1 :(得分: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>

答案 2 :(得分:-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>