网页占满整个屏幕_CSS网页背景图片等比例占满整个页面的解决方案

需求是这样的:

一个登录界面,让一张背景图片充满整个页面.需求看似非常简单,可是测试人员提的一个bug引起了我深入的思考.先上图,正常界面是这样的:

界面结构很简单,一个登录框,加一张背景图.我们都知道,使背景图片充满元素,只需添加如图所示的cover属性.

1.发现问题:

由于需要解决不同尺寸屏幕带来的布局问题,我尝试了各种方法.

最方便的,是把px替换成rem,可以解决大部分的此类问题.可惜只支持IE11及以上,故此适合于浏览器较新的移动端.

使用帮你解决了此类问题的UI插件?实际项目中,需要定制开发相应的样式,如果修改插件样式,成本很高,行不通.

于是,使用百分比.随之而来的问题是,当用户把浏览器缩小至窗口化,内部百分比元素全乱.

于是又寻找解决方案,去其他大型网站观察,比如搜狐,新浪...发现他们的网站,无论如何缩放,布局都不会乱,甚至丝毫不变,只是会多出滚动条.查看源码,有一个叫min-width和min-height的CSS属性,用于项目中,发现确实可以解决该问题.

但随之而来的,是另一个更奇怪的问题,如图:

浏览器全屏时,一切正常.但是当窗口化浏览器时,就会出现上图状况:

由于窗口宽度小于min-width,所以出现滚动条,不滚动的时候背景图正常,但滚动到右边,发现背景图神奇的只出现在左上角,占满未滚动前的部分,其他部分变成空白.也就是说,cover覆盖属性,在出现min-width带来的滚动条时失效了.

2.思考问题:

试了多种浏览器,都出现以上情况,排除了浏览器差异带来的影响.实际上,开发过程中,我们一般是不会随便去窗口化浏览器的.如果不是测试在bug平台上提交了这个bug,我也不会发现.

又试了不同尺寸分辨率的屏幕,问题是同样的.排除了尺寸差异的影响.也就是说,图片的cover属性在浏览器最大化状态是正常的,但是窗口化后,会出现一些问题,我相信这是浏览器自身的原因,而不是开发者的问题.

这是个不大不小的问题,因为它并不影响整体业务,可是,影响到了所谓的用户体验.用产品经理的话来说就是,你这样做,网站看起来就是山寨的.

3.解决问题:

问题的定义和原因都找到之后,就可以开始着手解决问题了.

首先,我取消了min-width和min-height属性,但是,登录框由于是百分比布局,会被压扁,导致布局错乱.

于是,我把这两个属性加在了登录框上.

终于,世界清静了.bug得到解决,一切回归正常.