我正在创建一个只显示SVG图像的页面,以下是要求:
CSS ......
body {
background: url(/path/to/image.svg);
background-size: cover;
}
... 几乎完美无缺,只是当浏览器窗口变得太窄时,它会拼贴而不是剪裁/裁剪。
以下是一些屏幕截图(请忽略dabblet留下的文物):
此处窗口接近原始图像的宽高比
此处窗口比纵横比“更短”,并且图像正在裁剪(根据需要)。
此处窗口比纵横比“更窄”,但不是裁剪,而是图像平铺(不需要)。
以下是我的一些想法......
这是我正在使用的dabblet ...... http://dabblet.com/gist/6033198
答案 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"> </div>