【问题标题】：How to tell if an image has been given a specific width/height with Javascript (jQuery)? [duplicate]如何使用 Javascript (jQuery) 判断图像是否具有特定的宽度/高度？ [复制]
【发布时间】：2012-10-05 21:58:28
【问题描述】：

可能重复：
How to get image size (height & width) using javascript?

通常我们可以使用$('img').width() 或$('img').css('width') 来获取图像宽度，当宽度指定如下时

<img src="image.gif" width="32" height="32" />
<img src="image.gif" style="width: 32px; height: 32px" />

但是如果我们不指定宽度：

<img src="image.gif" />

IE会返回28px，FF会返回0px。

问题是我们可能故意将图像宽度设置为 28px 或 0px，这将导致与实际未设置宽度的情况相同的数字。

我的问题是：我们如何判断图像是否具有特定的宽度/高度？

编辑

抱歉，忘记了一件重要的事情：IE 上为 28px，FF 上为 0px仅在找不到图像时发生 (404)

【问题讨论】：

更成问题的是通过类的宽度我猜：<img src="image.gif" class="wide"> 和 .wide { width: 32px; }
IE 是否返回 28px .width() 或 .css('width')？
这是一个重复的问题。见stackoverflow.com/questions/623172/…或stackoverflow.com/questions/5633264/…
@qodeninja 不...完全不同。我正在寻找一种方法来检查是否给定尺寸，而不是尺寸值。
@user1643156 - 是一回事。如果没有值，则没有设置维度。

标签： javascript jquery image dimensions

【解决方案1】：

这是一个 hack，但您可以通过这种方式获取原始 HTML：

var htmltag=$("img")[0].outerHTML;

然后将其解析为width="..." 或style="..."：

if (
    htmltag.match(/style=['"][^'"]*width:/) ||
    htmltag.match(/width=['"]/)
   ) alert("Has width");

border-width 等有一些极端情况，但你明白了。

【讨论】：

感谢 Wolfgang，但您的方法无法检测到在外部 css 文件中设置的样式。（是的，我没有提到外部 css）

【解决方案2】：

图像在浏览器中异步加载，因此取决于您检查尺寸的位置。我认为您所看到的是，当您查询宽度或高度时，图像尚未加载。

如果你运行它，你可能会看到最初的 alert() 报告为 0，但如果你点击按钮，它会显示实际大小：

<img id="Image" src="images/MessageBoardLogo.png" />
<input type="button" id="Button" value="Caption" />

<script type="text/javascript">
$().ready( function() {
    imageSize();

    $("#Button").click(imageSize);
});
function imageSize()
{
    alert($("#Image").width());
}        
</script>

讽刺的是，FireFox 在第一个示例中立即报告宽度，IE 和 Chrome 显示 0px，但这只是表明它取决于浏览器的时间、图像的加载时间等。

确保图像已加载并准备好可靠读取大小的最佳方法是使用加载处理程序：

$("#Image").load( function() { 
                      // do whatever you need with width and height
                      global.imgWidth = $(this).width(); 
                      global.imgHeight = $(this).height() 
                   });

【讨论】：

【解决方案3】：

检查.attr('width')/.attr('height')。

【讨论】：

如果使用 CSS 显式设置宽度会怎样？
我相信只检查是否指定了宽度/高度属性。
@ahren 然后你可以查看.css('width') 甚至查看.attr('style')。
如果你不关心它是用高度/宽度属性还是css声明设置的，你可以使用.height()或.width()
如果您需要计算图像的实际宽度和高度，那么 .width() 和 .height() 是更好的选择，因为它首先查找实际图像大小然后检查如果实际图像宽度不可用，则用于属性。永远不应该使用 .attr('width')/.attr('height') 而不是 .width() 和 .height()。