0

我在使用 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 示例，它正在工作。但在我的页面内它不是。它几乎相同，有一些 php 生成的内容，如 url 和一些文本。以及它在父div中的代码。

我尝试删除所有可能干扰它的 javascript，但它是一样的。在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>

第三次也是最后一次（希望如此）编辑：

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

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

2 回答 2

0

尝试纯 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 更可靠；）

于 2013-01-21T17:50:56.037 回答
0

这将确保在获取图像宽度手高之前实际加载图像

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();
于 2013-01-21T17:56:22.240 回答