JavaScript获取图片真实尺寸的方法与实现

背景与需求

网页中的图片尺寸往往趋于统一，常见多图文章页面的图片宽度通常与页面宽度一致，导致页面呈现单调的直筒形布局。这种局面很大程度上源于老式浏览器的限制。然而，随着Firefox、Chrome和IE11等现代浏览器的普及，浏览器对页面设计的限制已大幅减少，Web开发者的创意得以充分发挥。

例如，某些设计中图片超出文本宽度限制，营造出参差错落的视觉效果，并通过展示大图片的真实尺寸带来更震撼的体验。

技术上，我们可以通过文本最大宽度限制图片，使其保持统一宽度；若不按文本宽度限制，则需要获取每个图片的原始尺寸。除了服务端编辑时声明原始尺寸外，更灵活的方式是在页面中嵌入JavaScript代码，动态获取图片的原始大小并调整显示尺寸。这种方式既兼容老式页面的最大宽度限制，又能在需要时展示图片的真实大小。

获取图片原始尺寸的方法

如何在浏览器端使用JavaScript获取图片的原始尺寸？

var img = $("#img_id"); // 获取图片元素
var pic_real_width, pic_real_height;
$("<img/>") // 创建内存中的图片副本，避免CSS样式影响
.attr("src", $(img).attr("src"))
.load(function() {
pic_real_width = this.width; // 注意：$(this).width() 对内存图片无效
pic_real_height = this.height; // 同上
});

WebKit内核浏览器（如Chrome）需在图片加载完成后才能获取宽高值。因此，使用setTimeout延时等待并非最佳方案，推荐使用图片的onload事件。

上述代码通过创建内存中的图片副本来计算尺寸，从而避免CSS对图片实际大小的影响。

若页面为老式结构，可将此代码嵌入页面底部，无需修改原有页面结构即可实现功能。