Question

我有一个设置了宽度和高度的图片标记：

<img src='<%#Eval("ImageLocation").ToString().TrimStart(new char[]{'~'}).ToLower() %>' width="147px" height="147px" />

现在有些图像不是147x147，这意味着它们看起来不太好，所以我想在加载后检查图像的宽度和高度。我尝试在img上添加onload

<img src='<%#Eval("ImageLocation").ToString().TrimStart(new char[]{'~'}).ToLower() %>' width="147px" height="147px" onload="checkOrientation(this);"/>

在我做的功能中：

 function checkOrientation(el) {
           alert(el.width + "    " + el.height);

           if (el.height < el.width)
               $(el).removeAttr('height');
           else
               $(el).removeAttr('width');
       }

但这总是让147回来，即使图片不是147。

如何获得实际加载图像的宽度和高度？

Answer 1

如果你想获取原始的宽度和高度，那么你需要编写如下的函数。我们的想法是将src分配给新的img元素并检查宽度和高度。因为你已经为当前的img分配了一些宽度和高度。

  function checkOrientation(el) {
        var image = new Image();
        image.src = el.attr('src');
        image.onload = function () {
        this.height;
        this.width;
        alert(this.width + "    " + this.height);
        if (this.height < this.width)
           $(el).removeAttr('height');
       else
           $(el).removeAttr('width');
        } 
   }

获取具有属性集的实际加载图像的宽度和高度

1 个答案: