带srcset属性的img标签width与height属性的正确取值咨询

嗨，这个问题问得特别实在！其实答案很明确：你应该填写图片的显示尺寸——320 和 240，我给你把道理掰碎了说：

首先得搞懂img标签里width和height属性的核心作用：它们主要是告诉浏览器图片的固有宽高比，让浏览器在图片还没加载完成的时候，就能提前为它预留出准确的布局空间，避免页面加载时出现布局跳动的尴尬情况（也就是常说的CLS累积布局偏移）。

再回到你的具体场景：

• 不管你src里放的是320w还是640w的图，最终通过CSSimg { width: 320px; }设定的显示尺寸都是320x240，对应的宽高比是4:3。
• 要是你填640和480，浏览器确实能通过这个宽高比，结合CSS的width值算出正确的显示高度，但有个隐患：万一CSS没加载成功或者出了问题，图片会直接以640px的原始宽度展示，这就完全打乱了你原本的布局设计。
• 而填写显示尺寸320和240的话，就算CSS失效，图片也会按照你预期的320px宽度展示，同时浏览器依然能通过这两个值算出正确的宽高比，提前预留好布局空间，完美兼顾了布局稳定性和显示效果。

再补充下MDN推荐写法的思路：把高分辨率图设为src是为了兼容不支持srcset的老浏览器，让这些老设备也能加载到清晰的图片；而对于支持srcset的现代浏览器，会根据设备像素比自动选合适的图，但最终显示的尺寸还是由CSS控制的320px宽。所以width和height属性要匹配的是你想要的显示尺寸，而不是src图的原始固有尺寸。

内容来源于stack exchange