使用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進行縮放後檢索背景圖像的大小？

回答

相關問題