我正在使用适合浏览器窗口的可缩放背景图片的网站上工作,但在小浏览器窗口上查看时遇到问题。
当页面最初在高浏览器窗口上加载时,图像会正确地锚定到浏览器窗口的底部,并在调整窗口大小时进行缩放 - 即,当整个页面被包含时,它很好。但是,如果页面长度超过初始窗口高度,则滚动页面时,图像会向上滚动,留下间隙。
这是一个要演示的页面(首先尝试使用高窗口,然后使用短窗口,刷新并向下滚动以查看问题):
http://kevin-atkins.co.uk/slc/about-us.html
如何让背景图像适合浏览器窗口底部和/或滚动时不留间隙?
答案 0 :(得分:1)
您需要指定宽度\高度,以便它可以正确调整自身大小。
看到你使用css设置背景,你可以使用CSS3背景大小。大多数现代浏览器都支持它,如下所示:
#about-us {
background-size: 100%;
}
或者,您可以使用正确(宽度\高度)占用100%的图像标记和样式
参考:
希望这有帮助。