Chrome与Firefox中获取图片宽高返回0，仅Safari正常的WordPress图片画廊问题求助

嘿，我懂你现在的头疼——同样的代码在Safari顺顺当当，到Firefox和Chrome就时好时坏，时不时还拿到0宽高，确实让人摸不着头脑。问题其实出在你获取图片尺寸的方式，以及不同浏览器对图片加载状态的处理差异上。

问题根源 #

你当前用jQuery(this).width()和.height()获取的是图片渲染后的尺寸，这个值会受CSS样式影响，而且在部分浏览器里，哪怕window.load触发了，图片的渲染尺寸可能还没被浏览器完全计算好，就会返回0。另外你手动设置width:auto和height:auto的操作，也可能干扰浏览器的正常渲染流程。

解决方案：用图片原生属性拿真实尺寸 #

图片元素自带naturalWidth和naturalHeight属性，这两个值是图片文件的原始宽高，完全不受CSS样式影响，只要图片加载完成，就能稳定拿到正确数值。再配合更健壮的DOM遍历方法，就能搞定跨浏览器的问题。

修改后的代码如下：

jQuery(window).on('load', function () { 
  jQuery(".blocks-gallery-grid img").each(function() { 
    // 保险起见，先检查图片是否完全加载完成
    if (!this.complete || this.naturalWidth === 0) {
      // 万一图片还没加载好，绑定load事件后再处理
      jQuery(this).on('load', function() {
        addOrientationClass(this);
      });
      return;
    }
    addOrientationClass(this);
  });

  // 把逻辑抽成独立函数，代码更清晰
  function addOrientationClass(imgElement) {
    var naturalWidth = imgElement.naturalWidth;
    var naturalHeight = imgElement.naturalHeight;
    var aspectRatio = naturalWidth / naturalHeight;

    console.log(imgElement.src);
    console.log('原始宽高:', naturalWidth, naturalHeight);

    jQuery(imgElement).data("aspect-ratio", aspectRatio);
    // 用closest找最近的li，比多次parent()更抗DOM结构变动
    var $listItem = jQuery(imgElement).closest('li');
    
    if (aspectRatio > 1) {
      $listItem.addClass("landscape");
    } else if (aspectRatio < 1) {
      $listItem.addClass("portrait");
    } else {
      // 正方形默认归为横版，你可以根据需求调整
      $listItem.addClass("landscape");
    }
  }
});

关键改进点 #

• 改用naturalWidth/naturalHeight：直接获取图片的原始尺寸，完全不受CSS影响，不会出现0值的情况，跨浏览器表现一致。
• closest('li')替代多层parent()：如果WordPress画廊的DOM结构有变动，多层parent()会直接失效，closest()会自动找到最近的祖先li元素，代码更健壮。
• 增加图片加载检查：虽然window.load会等待所有资源加载，但极端情况（比如图片缓存异常）下，还是可能有图片没完全初始化，加个判断并绑定load事件兜底。

测试建议 #

你可以在Firefox和Chrome里测试这段代码，应该能稳定拿到图片的真实宽高，正确添加landscape或portrait类了。如果还有个别图片出问题，大概率是图片本身加载失败，你可以看控制台输出的src，检查图片是否能正常访问。

内容的提问来源于stack exchange，提问作者iconoclast