在工作中碰到一个问题：background-size是css3的新属性，当在IE8及其以下浏览器中不起作用，导致背景图片不能自适应元素的大小？
先看一个小demo:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .img{ width:300px; height: 300px; border:1px solid #000; background: url(img/timg.jpg) no-repeat; background-size: cover; //IE8下此属性失效 } </style> </head> <body> <div class="img"></div> </body> </html>
上面的代码在IE8以上，谷歌火狐等浏览器下，图片自适应铺满div元素，在IE8下只显示图片的一部分，解决办法如下：
解决办法1：引入jquery.backgroundcover.js 文件（下载地址：https://www.npmjs.com/package/jquery-backgroundcover），代码如下
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .container{ width:300px; height: 300px; border:1px solid #000; background: url(img/timg.jpg) no-repeat; background-size: cover; } </style> <script src="js/jquery-1.8.2.min.js" ></script> <script src="js/jquery.backgroundcover.min.js"></script> </head> <body> <div class="container"></div> <script> $('.container').backgroundcover({ safearea: "50%,50%,50%,50%" }) </script> </body> </html>
解决办法2：backgroundsize.min.htc（一个国外人写的小插件,下载地址：http://www.dowebok.com/139.html）代码如下
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .container{ width:300px; height: 300px; border:1px solid #000; background: url(img/timg.jpg) no-repeat; background-size: cover; -ms-behavior: url(css/backgroundsize.min.htc);//url中是文件的地址 behavior: url(css/backgroundsize.min.htc); } </style> </head> <body> <div class="container"></div> </body> </html>
解决办法3：变相的绕过background-size属性，用绝对定位修改代码，也可以达到那种效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .container{ width:300px; height: 300px; border:1px solid #000; position: relative; } .container img{ position: absolute; top:0; left:0; width: 100%; height: 100%; } </style> </head> <body> <div class="container"> <img src="img/timg.jpg" alt=""/> </div> </body> </html>