图片如何自适应浏览器窗口大小

标签： 前端，网页背景图片，切图

假如UI给你的设计稿的分辨率是 1980*1080 的，你通过 ps 切下来的背景图也是这个尺寸。如果用户浏览器的窗口可视区域小于或大于该尺寸，要么出现滚动条要么出现空白区域，那要如何使用 Jquery 代码使得图片可以自适应呢？

本文的思想是加载图片后计算浏览器的可视宽度和高度，然后重新设置图片的宽度和高度属性；浏览器缩放时监听该事件并且重新计算和设置图片的宽高。一般用在 body 样式为 overflow: hidden的情况，也即图片和内容都不会跑到容器外，基本上是适应大屏，不考虑小屏的情况。

其实很简单，首先看 HTML 代码，我们在网页上放入一张分辨率为 1980*1080 的背景图：

<div><img src="bkg_19201080" id="bkg_img" width="" height=""></div>

然后在网页加载 <script> 脚本时计算浏览器的可视高度和宽度，并将其设置为图片的宽度和高度：

//为了兼容 IE8 及之前版本的浏览器var w = window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;var h = window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;$("#bkg_img").attr("width", w);$("#bkg_img").attr("height", h);$(window).resize(function(){    $("#bkg_img").attr("width", w);    $("#bkg_img").attr("height", h);})

这样就可以使得背景图自适应浏览器的窗口大小啦！作为背景图，为什么这里我们不在 body 中直接使用样式 background-image 和 background-size 和 background-repeat 来设置背景图呢？主要是考虑到前面讲到的适应大屏的情况，在浏览器缩放到小屏尺寸时，如果设置为 no-repeat 则会出现空白，如果设置为 repeat 则可以在水平和垂直方向重复该图片，不会出现空白。但 UI 给的背景图可能不适合重复，因为该背景图可能不是均匀分布的。

我觉得可以有另外一种考虑，加载的时候还是使用 <img> 标签和 JS 来确定背景图的大小使其完全填充屏幕的可见区域；当浏览器缩放时，使用 resize() 检查其宽度，小于一定程度时 display:none 该背景图，并使用 background-image 设置背景图片，并将 overflow 设置为 auto,这样会出现滚动条，背景图片也会重复，小屏的时候可以有另外一种布局。

顺便写一下计算窗口大小的一些函数：

// screenInfo();// function screenInfo(){//    var  s = "";//    s += "\r\n网页可见区域宽："+ document.body.clientWidth;//    s += "\r\n网页可见区域高："+ document.body.clientHeight;//    s += "\r\n网页可见区域宽："+ document.body.offsetWidth  +" (包括边线的宽)";//    s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";//    s += "\r\n网页正文全文宽："+ document.body.scrollWidth;//    s += "\r\n网页正文全文高："+ document.body.scrollHeight;//    s += "\r\n网页被卷去的高："+ document.body.scrollTop;//    s += "\r\n网页被卷去的左："+ document.body.scrollLeft;//    s += "\r\n网页正文部分上："+ window.screenTop;//    s += "\r\n网页正文部分左："+ window.screenLeft;//    s += "\r\n屏幕分辨率的高："+ window.screen.height;//    s += "\r\n屏幕分辨率的宽："+ window.screen.width;//    s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;//    s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;//    s += "\r\n浏览器的内部高度："+ window.innerWidth;//    s += "\r\n浏览器的内部宽度："+ window.innerHeight;//    console.log(s);// }