jQuery css3 background-size

Question

我在使用jQuery .css('background-size','contain');

时遇到问题

在谷歌浏览器上，它有时会起作用，有时它不会......（90％的情况不起作用）

以下是我正在使用的代码：

function scaleImg(){    

    var img = $('#img_src_div img');
    if(img.height() >= 600 || img.width() >= 570){
        $('#img_src_div').css('background-size','contain');
    }

}

这是一个JSFiddle example，它正在运作。但在我的页面内却不是。 它几乎是一样的，有一些PHP生成的内容，如网址和一些文字。以及它在父div中的代码。

我尝试删除所有可能干扰它的javascripts，但它是一样的。在Firefox中，一切都好。

编辑：

images.php - 它包含在另一个php页面上。

//Removed - Was not usefull.

第二次编辑：在加载页面后手动调用scaleImg();，后台得到缩放。所以页面加载存在问题..

这是我现在正在使用的确切代码。

    <script type="text/javascript">
    function scaleImg() {
    var container = document.getElementById(\'img_src_div\');
    var img = container.children[0]; // assuming image is first child
    // var img = container.getElementsByTagName(\'img\')[0]; // use this one if not
    if( img.width >= 570 || img.height >= 600) container.style.backgroundSize = "contain";
}
    $(document).ready(function(){
    scaleImg();
    });
    </script>

第3次和最后一次（希望）编辑：

我已经解决了，问题是$(document).ready(...);它已在图像完全下载之前执行。因此，在文档就绪函数上调用scaleImg();，我在图像标记的onload=""内调用它。

<img alt="" onload="scaleImg(this.width,this.height);" id="img_src" src="image_url" />

Answer 1

尝试使用纯JavaScript：

function scaleImg() {
    var container = document.getElementById('img_src_div');
    var img = container.children[0]; // assuming image is first child
    // var img = container.getElementsByTagName('img')[0]; // use this one if not
    if( img.width >= 570 || img.height >= 600) container.style.backgroundSize = "contain";
}

jQuery可能会对您的CSS调用进行一些验证，并且由于某种原因而失败。普通JS更可靠;）

Answer 2

这将确保在获得图像宽度指针高度

之前实际加载图像

function scaleImg(){

    var actualImg = $('#img_src_div img'),
        imgH=0,
        imgW=0,
        img = new Image();

    img.src = actualImg[0].src;
    img.onload = function(){
         imgW = img.width;
         imgH = img.height;
        alert(imgW+' x '+imgH);
    }
    if(imgH >= 600 || imgW >= 570){
        $('#img_src_div').css('background-size','contain');
    }
}

scaleImg();