如何使用原生JavaScript设置img标签的width与height属性？

实现方案 #

给img标签设置width/height属性需要优先获取图片的真实宽高，避免图片未加载时拿到0值，完整实现代码如下：

const images = document.querySelectorAll('img');

images.forEach(img => {
  // 图片已经加载完成，直接读取原始宽高
  if (img.complete) {
    setImageSize(img)
  } else {
    // 图片未加载，等加载完成后再设置
    img.addEventListener('load', () => setImageSize(img))
    // 可选：加载失败的情况处理
    img.addEventListener('error', () => {
      // 可以在这里给加载失败的图片设置默认宽高
      img.setAttribute('width', '400')
      img.setAttribute('height', '300')
    })
  }
})

// 统一设置宽高属性的方法
function setImageSize(img) {
  // naturalWidth/naturalHeight 是图片的原始物理宽高
  const width = img.naturalWidth
  const height = img.naturalHeight
  // 给img标签设置width、height属性
  img.setAttribute('width', width)
  img.setAttribute('height', height)
}

注意事项 #

• 如果需要设置的是图片在页面上渲染后的展示尺寸，把naturalWidth替换为offsetWidth，naturalHeight替换为offsetHeight即可。
• 如果你的项目有SEO强需求，建议尽量在服务端渲染阶段就把宽高属性写到img标签里，部分爬虫不会执行前端JS，动态设置的属性可能无法被抓取到。
• 如果图片是响应式展示的，设置完原始宽高后搭配CSS max-width: 100%; height: auto;使用，既可以保留宽高比避免布局偏移，也不影响响应式效果。

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