Jquery图片背景自适应

概述

最近在做一个项目，要求实现背景自适应，何为背景自适应呢？

1.如果背景图高度不够，background-size就应该是 auto 100%

2.如果背景图宽度不够，background-size就应该是100% auto

实现

Code

#css样式  

#app {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url(fileurl);
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

# js 脚本

var bg_auto_size = function(src) {
var dh = document.documentElement.clientHeight;
var dw = document.documentElement.clientWidth;
var img_url = src;
var img = new Image();
img.src = img_url;
img.onload = function() {
     var dRatio = dw / dh;
     var imgRatio = img.width / img.height;
     if(dRatio <= imgRatio) {
         $('#app').css({ 'background-size': 'auto 100%', 'background-position': 'center 0' });
     } else {
         $('#app').css({ 'background-size': '100% auto', 'background-position': 'center 0' });
     }
 }
};
//这个图片的地址必须是![](75)绝对路径，如果用相对路径就会报错，文件识别不出，下面路径是我随便找的，不是实际背景的真实绝对路径
var bg = 'fileurl';
bg_auto_size(bg);