如何设置背景图像为背景大小：包含在初始加载但阻止其调整窗口大小？

Question

有没有办法做到这一点？我正在创建一个HTML应用程序，并且我不想在打开软键盘时调整背景图像的大小。谢谢！

Answer 1

---

.element{ 
    /*important*/ 
    width: [you-width]; 
    height: [you-height]; 
    /*image*/ 
    background-image: url(some.jpg); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
    background-position: 0 0; 
    /*optional*/ 
    position: relative; 
    background-attachment: fixed; 
    overflow: hidden; 
} 

---

Answer 2

您罐使用JS ..当你触发键盘的显示。你该元素上添加一个类，并把一个固定值的BG

Answer 3

谢谢你们，我解决了这个问题是这样的：

$scope.getImageSize = function(div){ 
var backgroundImage = new Image(); 
backgroundImage.src = $(div).css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, ""); 

backgroundImage.onload = function() { 
    var width = this.width; 
    var height = this.height; 

    var object = $(div); 

    /* Step 1 - Get the ratio of the div + the image */ 
    var imageRatio = width/height; 
    var coverRatio = object.outerWidth()/object.outerHeight(); 

    /* Step 2 - Work out which ratio is greater */ 
    if (imageRatio >= coverRatio) { 
     /* The Height is our constant */ 
     var coverHeight = object.outerHeight(); 
     var scale = (coverHeight/height); 
     var coverWidth = width * scale; 
    } else { 
     /* The Width is our constant */ 
     var coverWidth = object.outerWidth(); 
     var scale = (coverWidth/width); 
     var coverHeight = height * scale; 
    } 
    var cover = coverWidth + 'px ' + coverHeight + 'px'; 
    $localStorage.image = {width: coverWidth + "px", height: coverHeight + "px"}; 
    $('.pane').css('backgroundSize', $localStorage.image.width + " " + $localStorage.image.height); 
    return $localStorage.image; 
}; 

} 

因为它是一个移动应用程序，我锁定我的方向假设宽度和高度不会改变，我将background-size更改为等于从background-size: contain调整后的宽度和高度。