使用jQuery进行缩放后检索背景图像的大小？

我有以下简单的代码来获取背景图像的尺寸，但它抓取原始图像的大小，而不是我在div中缩放的大小。我想在缩放后获得像素尺寸，有没有办法做到这一点？使用jQuery进行缩放后检索背景图像的大小？

var actualImage = new Image(); 
actualImage.src = $("#chBox").css('background-image').replace(/"/g, "").replace(/url\(|\)$/ig, ""); 
actualImage.onload = function() { 
    width = this.width; 
    height = this.height; 
}

编辑：

规模背景图像的CSS：

#chBox { 
height:100%; 
width:100%; 
background-repeat:no-repeat; 

background-image: url(../content/frog/1.jpg); 
background-position: center; 
    -webkit-background-size: contain; /*for webKit*/ 
    -moz-background-size: contain; /*Mozilla*/ 
    -o-background-size: contain; /*opera*/ 
    background-size: contain; /*generic*/ 

}

来源

2012-06-26 prismspecs

我可能会在这里丢失一些东西，但如果图像缩放到元素的宽度，为什么不只是获取元素的宽度？ $（“＃chBox”）。width（） –

包含bg图像的div大于图像 – prismspecs

的代码是做你告诉它做什么。我不相信有办法抓住'缩放'的尺寸。

来源

2012-06-26 23:29:55 transparent

您不需要获取实际图像的尺寸，而需要获取所需图像的$('#someImage').css('width')和$('#someImage').css('height')。

编辑：

#someImage img { 
    width: 100px; 
    height: auto; 
} 
<td id="image"> 
    <img id="someImage" src="image.jpg"> 
    <script type="text/javascript"> 
     alert($('#someImage').css('width')); 
    </script> 
</td>

上面的代码将提醒 “100px的”。当然，如果你使用一些jQuery来改变图像的宽度，如$('#someImage').css('width','300px')，代码会更新并警告“300px”

来源

2012-06-26 23:42:35

这似乎不适合我。你能为我清除标识符吗？是img＃someImage更像#someImage？ – prismspecs

'img'只是一个标签，jQuery用它来更清楚地标识选择器是什么。然而'img'没有必要，'＃someImage'可以正常工作。 –

@prismspecs请注意编辑我对我的回答 –

好吧，感谢大家的回应，但我想到了一些解决方法。我希望在jQuery的后续版本（抓取缩放的宽度，高度）中看到此功能，但有一些数学，它并不是那么糟糕。从本质上讲，

  // create a fake image and load the original from background-img src 
     var actualImage = new Image(); 
     actualImage.src = $("#chBox").css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, ""); 
     actualImage.onload = function() { 
      // get original values 
      var origWidth = this.width; 
      var origHeight = this.height; 
      var width = 0; 
      var height = 0; 
      // need to bump it 140px as it seems the div's left comes from the super-container 
      var bump = 140; 
      // if the image is fat rather than tall, 
      if(origWidth > origHeight){ 
       // set width for description to width of bg-img container 
       var width = $("#chBox").width(); 
       // set left 
       $(".description").css("left", bump); 
       // calculate height and set bottom 
       height = (width * origHeight)/origWidth; 
       var blankSpace = $("#chBox").height() - height; 
       $(".description").css("bottom", (blankSpace/2)); 


      } else { 
       // if image is tall, 
       var height = $("#chBox").height(); 
       // calculate width 
       width = (height * origWidth)/origHeight; 
       // set left 
       var setLeft = $("#chBox").width(); 
       $(".description").css("left", (setLeft/2) - 58); //wtf, 58? 
       // set bottom to 0 
       $(".description").css("bottom", 0) 
      } 

      $(".description").width(width); 
     }

有相当多的站点特定的东西有，但基本上我跑了一些代数找到图片的比例。如果它是一个胖的图像而不是一个高大的图像，容器的宽度就是缩放的宽度。高度等于缩放的宽度*原始图像高度除以原始图像宽度。出于某种原因（如果有人可以提供帮助，我会感激不尽）：0 auto;当您更改div宽度时，我的CSS属性不起作用，所以我不得不手动将其居中。

来源

2012-06-27 19:56:19 prismspecs

使用jQuery进行缩放后检索背景图像的大小？

回答

相关问题