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;
    }

background-image本身是使用jQuery调用设置的，该调用修改了div的css。这有点像魅力，但我想知道渲染的背景图像的尺寸。如果渲染小于特定尺寸，我想根据美学原因设置背景颜色。

我目前无法检索渲染图像的尺寸。我在循环中使用了以下代码来尝试和检索图像的尺寸，但这会返回图像的原始尺寸，然后再缩放到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

给图像一个id：

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

Answer 2

在尝试了黄教的想法后，我得出了以下解决方案：

                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内的宽度。然后将该比率与相反的尺寸（高度*宽度比，宽度*高度比）相乘，以计算渲染图像的尺寸。

将控制台中的值与Photoshops中的测量值进行比较显示它们是完美的匹配！

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

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

2 个答案: