Question

虽然我试图获得图像的大小，但我可以添加相同大小的div来解释图像。图像是动态的，所以如何才能获得浏览器上显示的图像大小而不是图像的实际大小。我尝试了以下代码，但是当父类小于图像时不起作用。

$('img').each(function(i) {
  $currentImg = $(this);
  imgTextshow = $currentImg.attr('imgtext');
  var img = new Image();
  img.onload = function() {
    $currentImg.after("<div class='img-fscreen' style='width:" + this.width + "px; max-width:" + $currentImgParent + "'>" + imgTextshow + "</div>");
  }
  img.src = $(this).attr('src');
});

Answer 1

如果在onload处理程序中使用以下代码行，它们应该为您提供正确的尺寸：

$currentImg.width();
$currentImg.height();

只是因为这些方法返回img DOM元素的宽度/高度。

Answer 2

只需使用以下行

img.onload = function() {
   $currentImg.after("<div class='img-fscreen' style='width:" +  $currentImg.width() + "px; max-width:" + $currentImgParent + "'>" +    imgTextshow + "</div>");
}

获取动态图像宽度

2 个答案: