在 jQuery 和 PrototypeJS 中查找未知的图像尺寸答案

【问题标题】：Find unknown image dimension in jQuery and PrototypeJS在 jQuery 和 PrototypeJS 中查找未知的图像尺寸
【发布时间】：2013-05-05 17:30:19
【问题描述】：

我想知道这张图片的像素尺寸。

在 jQuery 中

var h = $("img").height();
var w = $("img").width();
alert(h +"px", w +"px");

在 PrototypeJS 中

var h = $('img').getHeight();
var w = $('img').getWidth();
alert(h);
alert(w);

使用这两个，我得到每个图像的尺寸为 20px 和 1350px，它们的原始尺寸不同。

【问题讨论】：

标签： jquery prototypejs dimension

【解决方案1】：

所以你想获得图像的实际大小，而不是它呈现给网络浏览器的大小？如果是这种情况，这些代码可能会对您有所帮助：

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = $("#myimg").attr('src');

参考这里：How do I get actual image width and height using jQuery?

【讨论】：

【解决方案2】：

这是因为$('img') 将定位到您的 DOM 中的每张图片，20px 和 1350px 是您的第一张图片的尺寸。在这种情况下，您需要使用each()：

$("img").each(function() {
    $(this).click(function() {
        var w = $(this).width(),
            h = $(this).height();
        alert(h +"px " + w +"px");
    });
});

Fiddle

但是我建议你给你的图片一个类，而不是仅仅选择纯<img>标签：

<img class="image" />

那么你可以这样做：

$(".image").click(function() {
    var w = $(this).width(),
        h = $(this).height();
    alert(h +"px " + w +"px");
});

Fiddle

【讨论】：