jQuery的CSS3背景大小

我使用jQuery .css('background-size','contain');jQuery的CSS3背景大小

在谷歌浏览器有时工作，有时它没有..问题（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中的代码。

我试着删除所有可能干扰它的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>

3日和last（希望）编辑：

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

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

来源

2013-01-21 Fr0z3n

除非这是在Chrome中一个已知的bug之前实际加载，我们就需要看到的东西破碎的情景来帮助。 – isherwood

什么不起作用？ – doniyor

缩放它不起作用，背景图片以全尺寸加载。 – Fr0z3n

尝试纯天然的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-21 17:50:56

尝试了您的代码，按照Firefox上的预期工作，但未在Google Chrome中使用。同一问题。 – Fr0z3n

这很奇怪。尝试在元素上使用Inspector（右键单击Inspect），然后检查其联机样式。你应该在上面看到'background-size：contains'。如果它被删除，可能会有一个警告图标，您可以将鼠标移到其上以查看其无法使用的原因。 –

根本没有这条线。我已经在此问过之前检查过了。我可以在计算样式上看到，背景大小设置为自动，因此根本不应用。 – Fr0z3n

这将确保图像获取图像的宽度手高度

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-21 17:56:22

我试过你的代码。图像高度/宽度正确加载，因为我可以看到警报。但它仍然保持全尺寸。另外在Firefox中它不起作用。 – Fr0z3n

jQuery的CSS3背景大小

回答

相关问题