今天客户要求，背景图片要全部显示出来，由于div的高度是自适应的，背景图片在html里有没有高度，所以在网上找到了一种js可以根据背景图片的宽高比计算出div的高度，动态赋值，完美解决问题。

css样式部分：

#div {
  width: 100%;
  background: url("bg.jpg") no-repeat;
  background-size: 100% auto;
}

js部分：

function resizeDiv() {

    // 获取 div 元素
    var div = document.getElementById("div");
    
    // 兼容 style
    var style = div.currentStyle || getComputedStyle(div, false);
    
    // 从 url("/path/to/image.jpg") 中获取图像地址
    var img_src = style.backgroundImage.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');

    // 创建新图像
    var img = new Image();
    
    // 图像加载
    img.onload = function() {
    
        // 获取宽高比
        var ratio = img.width / img.height;
        
        // 根据比例设置 div 高度
        div.style.height = parseInt(div.offsetWidth / ratio) + "px";
        
        img = null;
    };
    
    img.src = img_src;
};

// 页面加载，设置 div 高度
window.onload = function() {
    resizeDiv();
};

// 窗口变化，设置 div 高度
window.onresize = function() {
    resizeDiv();
};

本文根据网络整理备份！