大分辨率图片根据用户分辨率自适应其浏览器大小

时间:2021-07-20 14:18:03

现在做网页好的背景图片可以直接把页面的档次提高一倍,如果背景图片是纯色或者是小 图片的话,我们直接就可以通过(background-repeat)平铺的方式实现,但是往往都是美工不遂人愿,总是把背景图做的花里胡哨的,根本没法通过平铺来实现,如果要是用js判断浏览器分辨率来展示相应分辨率的背景图片,这样实现虽然能实现,但是毕竟麻烦了点,哎~~没办法,我的座右铭就是能偷懒就多偷一点。。。。于是便想到了background-size:cover或者100%;但是、但是、但是,background-sizecss样式不支持ie8,而我们的系统还必须要求支持ie8.。。。不气,不气,我一点都不气。。。

在网上一顿搜索后,终于找到了个方法,非常简单,就三行代码,下面来看下吧~~

<div id="web_bg" style="position:absolute; width:100%; height:100%; z-index:-1">
	<img style="position:fixed;" src="http://a.lanyes.org/bg1.jpg" height="100%" width="100%" />
</div>
从上面的代码可以看出运用了img在100%的情况下会根据容器的宽高自适应,然后通过定位把图片固定并放在最下层。

转载自:http://lanyes.org/web/325.html