使用 jQuery 找出图像的宽度答案

【问题标题】：Find out what the width of an image is using jQuery使用 jQuery 找出图像的宽度
【发布时间】：2012-04-18 14:33:40
【问题描述】：

我有这些图像，我正在使用 PHP 从我的服务器和数据库中获取这些图像

<div class="pics">

<img src="upload/<?php echo $array['image'] ?>" height="200"/>

</div>

实际尺寸很大，但我需要它们都在 200 的高度。

我如何使用jQuery找到这张图片的宽度，我在任何地方都找不到教程......

任何帮助将不胜感激。

谢谢你的时间， J

【问题讨论】：

【解决方案1】：

尝试使用.width 函数。类似$('img').width();

此外，还有.innerWidth 和.outerWidth 函数可以包含/排除填充、边框和边距。详情见下图，

【讨论】：

绝对引用 davidethell 发布的内容，因为如果调用时图像尚未完成加载，.height() 和 .width() 将返回 0。使用这些方法可以，但您需要确保图像已完成加载。
@spoonybard896 <img src="upload/<?php echo $array['image'] ?>" height="200"/> 看起来不像是在动态加载。
是的，但据我了解，如果实际图像内容尚未完成加载并且您要求它的宽度/高度，您将在 Webkit 浏览器中得到零。
@spoonybard896 OP 从未提及他将在哪里打电话给.width。如果没有加载，即使帖子中的那个也不会工作。那篇文章谈论的是使用 .load 加载图像并在将图像插入 DOM 之前获取图像的宽度。你不能计算未加载的东西的宽度。
只是想指出，在使用.width和.height时，应该考虑到图片是否已经加载

【解决方案2】：

我会尝试.innerWidth() 而不是.width()，因为.width() 会包含边距。

$('img').innerWidth();

如果你的图片真的那么大，你应该考虑在服务器端缩小它。

更新

实际上.width() 没有添加边距，甚至没有添加填充。这使得.width() 比.innerWidth() 更合适。谢谢SKS。

【讨论】：

width() would include the margin - 不正确。 .width 将只返回没有padding/border/margin 的元素宽度。