文档章节

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

编程使我快乐
 编程使我快乐
发布于 2017/07/12 17:44
字数 838
阅读 36
收藏 0

需求是这样的:

一个登录界面,让一张背景图片充满整个页面.需求看似非常简单,可是测试人员提的一个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得到解决,一切回归正常.

 

 

© 著作权归作者所有

编程使我快乐
粉丝 0
博文 3
码字总数 2028
作品 0
西城
程序员
私信 提问
移动 Web 开发问题和优化小结

1.前言 到目前为止,互联网行业里,手机越来越智能化,移动端占有的比例越来越高,尤其实在电商,新闻,广告,游戏领域。用户要求越来越高,网站功能越来越好,效果越来越炫酷,这就要求我们...

守候i
2017/09/25
0
0
使用img标签和背景图片之间的区别

1.img <img src="图片来源" alt="图片无法显示时显示图片说明性文字" style="设置样式属性" /> img标签虽然不是块状元素,但是可以设置宽高,占位, img设置width后height会自适应匹配,如果......

爱喝水的小熊
2018/01/08
0
0
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图

技术的新发展,除计算机可以接入互联网之外,平板电脑、智能手机、智能电视等其他设备均可访问互联网。在多设备时代,构建多屏体验也不是听说的那么难。 但是这也增加了学习CSS的难度?不知道...

woIwoI
2014/11/28
0
0
关于最近开发小程序中踩过的那些坑

作为一个二流前端也有段时间了,每天沉溺于项目功能代码很多积累到最后只成了模糊的印象。 很不巧,我这个人记性不太好。 不过有句话是这么说的,好记性不如烂笔头,在这个年代当然不需要烂笔...

ha_wolf
2018/09/04
0
0
网页优化插件--YSlow

YSlow是yahoo美国开发的一个页面评分插件,非常的棒,从中我们可以看出我们页面上的很多不足,并且可以知道我们改怎么却改进和优化。 YSlow跌评分规则。 主要有12条: 1. Make fewer HTTP r...

匿名
2008/09/19
12.9K
2

没有更多内容

加载失败,请刷新页面

加载更多

存储过程无参数,in,out ,in out 的用法

select * from scott.emp where empno=7839 or empno=7566 select * from emp5 create table emp5 as select * from scott.emp -----------------in create or replace procedure raisesalar......

颜丽
55分钟前
2
0
SOFAJRaft-RheaKV 是如何使用 Raft 的 | SOFAJRaft 实现原理

SOFAStack Scalable Open Financial Architecture Stack 是蚂蚁金服自主研发的金融级分布式架构,包含了构建金融级云原生架构所需的各个组件,是在金融场景里锤炼出来的最佳实践。 本文为《剖...

SOFAStack
58分钟前
2
0
同一父类,不同子类集合可判断该元素组是否相等

判断集合是否相等时只关注元素是否相等,无需考虑类型,即同调父类AbstractList里的equal方法 源码如下: public boolean equals(Object o) { if (o == this) return true; if (!(o instance...

恋码之子
今天
2
0
PTH建设模块划分

todo

春哥大魔王的博客
今天
2
0
spring循环依赖

循环依赖解决 constructor(此种无法解决) (看完sertter之后再来看这部分吧)我想看过下部分setter解决循环依赖的实现之后,肯定有想法为啥constructor无法实现,我们同样可以提前曝光一个S...

lazy~
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部