使用 jQuery 检索渲染的背景图像的尺寸

Question

我有一个包含项目列表的页面，其中每个项目都有一个包含背景图像的方形 div。此图像的尺寸可以大于或小于 div 本身。背景居中并包含在 div 中，因此它始终显示在 div 的中间。 用于此的 css 如下：

    .productImage
    {
      width:  225px; 
      height: 225px; 
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
      margin-left:70px;
    }

背景图像本身是使用修改 div 的 css 的 jQuery 调用设置的。 这就像魅力一样，但是我想知道渲染背景图像的尺寸。如果渲染小于特定尺寸，出于美学原因，我想设置背景颜色。

我目前无法检索渲染图像的尺寸。我在循环中使用了以下代码来尝试检索图像的尺寸，但这会返回图像的 原始 尺寸，然后再将它们缩放到 div 中。

images[i] = new Image();
images[i].src = $('#image'+i).css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");
images[i].pos = i;

images[i].onload = function() {
var position = this.pos;
width = this.width;
height = this.height;

console.log("For image "+position+" the height is "+height+" and width is "+ width);
}

如何使用 jQuery 或纯 Javascript 找出渲染背景图像的尺寸？这甚至可能吗？

提前致谢。

Answer 1

在玩弄了Huangism的想法后，我得出了以下解决方案：

                images[i] = new Image();
                images[i].src = $('#image'+i).css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");
                images[i].pos = i;

                images[i].onload = function() {
                    var position = this.pos;
                    width = this.width;
                    height = this.height;
                    var divwidth = $('#image'+position).width();
                    var divheight = $('#image'+position).height();
                    var ratioH = divheight / height;
                    var ratioW = divwidth / width;
                    var scaleW = width * ratioH;
                    var scaleH = height * ratioW;

                    console.log("For image "+position+" the height is "+height+" and width "+ width +" and ratioH "+ratioH + " and ratioW " + ratioW  +" (Scaled width: "+scaleW+")" );

                    if(scaleW < 120 || scaleH < 100){
                    $('#image'+position).css('background-color', 'red');
                    }
                }

此代码将用作背景图像的图像的高度和宽度与他所在的 div 的尺寸进行比较。基于此，我计算原始高度和宽度与 div 内的最大高度和宽度之间的缩放比例. 然后将该比率乘以相反的尺寸（高*宽比，宽*高比）来计算渲染图像的尺寸。

将控制台中的值与 Photoshop 中的测量值进行比较表明它们是完美匹配的！

我希望这个答案可以帮助其他想知道渲染背景图像尺寸的用户。

Answer 2

然后给图片一个id：

var width = document.getElementById('myImageID').offsetWidth;
var height= document.getElementById('myImageID').offsetHeight;