img 不自适应因浏览器按原始尺寸渲染，需 CSS 控制：设 max-width: 100% + height: auto；父容器须有宽度上下文；srcset 需配 sizes 才生效；object-fit 需容器明确宽高，IE 需降级。
img 标签不加 width/height 为什么还是不自适应？
因为浏览器默认按图片原始尺寸渲染，img 本身没有“响应式”属性，只靠 HTML 不够，必须配合 CSS 控制行为。
常见错误是只写 <img src="a.jpg" alt="HTML图片怎么响应式_HTMLimg元素自适应高频技巧【汇总】" >，结果在小屏上横向溢出、撑破容器。这不是 bug，是默认行为。
- 必须显式设置
max-width: 100%，否则宽度不会随父容器收缩 - 同时设
height: auto，避免拉伸变形（尤其 PNG/GIF 等非固定宽高比图） - 如果父容器没设宽度（比如
<div> 默认 block 但无 width），那 <code>100%就没意义——得先确保父级有可参照的尺寸上下文CSS 中用 width:100% 还是 max-width:100%？
max-width: 100%是安全选择；width: 100%在图片本身比容器小时会强制拉伸，失真。典型场景：同一页面混用大图和小图标，或者 CMS 后台用户上传任意尺寸图。
立即学习“前端免费学习笔记（深入）”；
-
max-width: 100%→ 图片在容器内时保持原尺寸，在容器外时缩放到刚好填满宽度 -
height: auto必须配套，否则宽高比断裂 - 不要对
img设固定height，除非你明确控制所有图源尺寸
srcset + sizes 怎么配才不白写？
写了
srcset却没生效，大概率是没配sizes或值写错了——浏览器靠sizes决定选哪张图，不是光看屏幕宽度。例如：
<img src="a-400.jpg" srcset="a-400.jpg 400w, a-800.jpg 800w, a-1200.jpg 1200w" sizes="(max-width: 768px) 100vw, 50vw" alt="HTML图片怎么响应式_HTMLimg元素自适应高频技巧【汇总】" >-
sizes="(max-width: 768px) 100vw, 50vw"告诉浏览器：“小屏下这张图占满视口宽，大屏下只占一半” - 浏览器据此算出需要多宽的图，再从
srcset里挑最接近的xxxw版本 - 漏写
sizes，浏览器默认按100vw算，可能总选最大图，浪费带宽
object-fit 替代 background-image 做封面图时要注意啥？
用
<img alt="HTML图片怎么响应式_HTMLimg元素自适应高频技巧【汇总】" >配object-fit: cover实现类似background-image的裁剪效果，比 div+background 更语义化、利于 SEO 和无障碍访问。但别直接套用 CSS 背景那套思维——
img是替换元素，行为更严格。- 必须设容器有明确宽高（或通过 padding-bottom 模拟），否则
cover没参考基准 -
object-fit不影响图片文件大小，只是渲染裁剪，原图仍完整加载 - IE 不支持
object-fit，如需兼容，得 fallback 到 background-image + JS 检测，或用picture+img多格式兜底
img写了一堆 CSS，却忘了外层<div class="card"> 自己没设 <code>width或max-width，导致所有响应式努力都失效。图片不会自己猜你想要多宽。 -
