使用 Jquery 获取图像大小答案

【问题标题】：Get image size with Jquery使用 Jquery 获取图像大小
【发布时间】：2011-07-11 13:32:01
【问题描述】：

我有一张图片列表

<img src="001.jpg"> 
<img src="002.jpg">
<img src="003.jpg">
<img src="004.jpg">
<img src="005.jpg">

每张图片的宽度为 200 像素，但高度不同。 Jquery有没有办法找到，然后在加载后设置每个图像的高度？

我计划在一个页面上包含几十个图像，并且不想为每个图像标签添加宽度和高度属性。

我正在使用 Masonry 插件，它需要图像的宽度和高度属性。

【问题讨论】：

你不是已经问过这个了吗？ stackoverflow.com/questions/5239726
@grc，它确实看起来非常相似，但我对答案似乎有多么不同感兴趣。

标签： jquery height width

【解决方案1】：

您可以使用 jQuery 的 .height() 和 .width() 方法，因为它们返回计算的宽度和高度。但是，您应该始终在 img 标签中包含 width 和 height 属性，因为如果没有它们，某些浏览器将无法正确呈现这些图像。

【讨论】：

【解决方案2】：

你可以试试：

$('img').each(
    function(){
        var height = $(this).height();
        var width = $(this).width();

        $(this).attr({'height': height, 'width': width});
    })

假设您希望将height/width 属性设置为img 的实际高度/宽度，而不是以某种方式缩放/修改。

参考资料：

【讨论】：

我想我正在缩放图像。看看这里的项目：jsfiddle.net/ryanjay/fgNMJ 现在它可以在 jsFiddle 中工作，但在服务器上却不能......ryanjay.com/layouttest 我应该在哪里添加这段代码来查找每个图像的高度并设置它们？跨度>

【解决方案3】：

可以，用height方法获取img标签的大小。

http://api.jquery.com/height/

【讨论】：

【解决方案4】：

我相信这会做你想要的：

$('img').each(function() {
    $(this).attr('height',$(this).height());
    $(this).attr('width',$(this).width());
});

您可能还想为每个 img 添加一个class="masonry" 属性，然后将您的选择器设为$('img.masonry')。

【讨论】：