图片自适应响应需理解浏览器选图机制、CSS显示控制及破坏性属性；max-width:100%+height:auto依赖父容器宽度、无行内宽高限制、布局允许收缩；srcset/sizes解决加载优化，object-fit需容器明确宽高才生效。
直接用 <img alt="HTML怎么用原生标签实现图片自适应响应" > 标签就能实现图片自适应响应，不需要 JS、不需要框架，但必须理解三件事：浏览器怎么挑图、CSS 怎么控制显示、哪些属性会暗中破坏它。
为什么 max-width: 100% + height: auto 有时不生效
这组规则不是“万能开关”，它依赖三个隐性前提：父容器有可计算宽度、<img alt="HTML怎么用原生标签实现图片自适应响应" > 没被内联 width/height 锁死、布局上下文允许收缩。常见失效点包括：
- 父容器是空
<div> 或只写了 <code>display: flex却没设width或flex-basis，100%就失去参照 -
<img style="max-width:90%" style="max-width:90%" alt="HTML怎么用原生标签实现图片自适应响应" >这类行内属性会强制覆盖height: auto，哪怕 CSS 里写了也没用 - 在 Flex 容器中，
<img alt="HTML怎么用原生标签实现图片自适应响应" >默认带min-width: auto，会阻止它随容器变窄而缩放，需显式加min-width: 0 - 全局样式（比如某些 UI 库）写了
img { max-width: none }，直接顶掉你的规则 -
srcset提供多个物理尺寸版本：photo-480w.jpg 480w、photo-1200w.jpg 1200w -
sizes告诉浏览器“这张图在不同视口下会占多宽”：(max-width: 600px) 100vw, 33vw - 浏览器先根据
sizes算出目标显示宽度，再从srcset中选最接近且不小于它的图片加载 - 别指望靠一张大图 +
max-width: 100%应对所有设备——小屏用户会白白下载几 MB 图片 - 必须同时设置容器的
width和height（或用aspect-ratio: 16/9） -
object-fit: cover：等比缩放+裁剪，适合封面图；可用object-position: top控制裁剪起点 -
object-fit: contain：等比缩放+完整显示，留白是设计结果，不是 bug - 老版 iOS Safari 需加
-webkit-object-fit；IE 完全不支持，fallback 只能用background-image，但会丢alt和 SEO
srcset 和 sizes 解决的是加载问题，不是显示问题
max-width: 100% 控制图片“怎么画出来”，srcset+sizes 决定浏览器“加载哪一张”。两者分工明确，混用反而让问题更难定位：
object-fit 只在容器有明确宽高时起作用
object-fit 不是“让图片自适应”，而是“让图片按指定框裁剪或缩放填充”。它只在容器有明确尺寸约束时才生效：
立即学习“前端免费学习笔记（深入）”；
真正难的不是写哪一行 CSS，而是判断当前场景到底要解决什么：是图片溢出？是拉伸变形？是加载太慢？还是高清屏模糊？每个问题背后对应的技术路径完全不同。漏掉 width/height 属性不会报错，但会导致布局抖动；漏掉 sizes 不会显示异常，但会让 LCP 直接翻倍；这些“沉默失败”的细节，才是原生响应式图片最难缠的地方。
