显式设置图片width和height导致sizes属性失效，如何无需CSS解决？

核心原理说明 #

sizes属性的作用只是告知浏览器图片在页面中的预期显示宽度，用于匹配srcset中最合适的图源加载，它本身不具备控制图片实际渲染尺寸的能力，这是HTML规范的原生设计，不是属性失效。
你直接给img标签设置固定的width、height属性后，浏览器默认会按照属性值固定渲染图片尺寸，自然会出现无论视口多大都按固定宽度显示的问题。

最优解决方案 #

不存在完全不需要CSS的实现方案，因为原生HTML的width、height属性仅支持固定像素值，天生不支持响应式动态尺寸控制。你只需要添加一行全局CSS重置，就能完美满足所有需求：

1. 保留img标签上的width、height属性（满足Lighthouse/PageSpeed Insight要求，避免布局偏移）
2. 保留srcset、sizes属性，按原有逻辑配置图源匹配规则
3. 加入全局CSS重置：

img {
  max-width: 100%;
  height: auto;
}

方案优势 #

• 无需为每个图片单独编写媒体查询样式，全局一次配置所有图片生效
• 保留了sizes属性的语义，图源选择逻辑统一放在HTML中维护，更符合响应式图片的设计规范
• 完全满足性能检测工具的所有要求：显式设置宽高属性无布局偏移、响应式图源加载正常
• 图片会自动按原始宽高比缩放，不会出现变形问题

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