图片移动端自适应需设img{max-width:100%;height:auto;min-width:0}，清除HTML内联宽高，父容器设明确宽度，配合srcset/sizes响应式加载，并用object-fit处理固定尺寸容器中的任意比例图。
让图片在移动端网页中自适应宽度，核心是两件事：**不让它撑破容器，也不失真变形**。最关键的 CSS 规则就一条：img { max-width: 100%; height: auto; }。但光写这行不够，得配合几个关键前提和细节处理。
必须清除内联宽高属性
如果 <img alt="HTML怎么让图片在移动端网页中自适应宽度" > 标签里写了 width="600" style="max-width:90%" 这类 HTML 属性，CSS 的 height: auto 就会被覆盖，图片高度被锁死，缩放时就会拉伸或压扁。
- 直接删掉 img 标签里的
width和height属性 - 或者用 JS 清除：
img.removeAttribute('width'); img.removeAttribute('height'); - 现代项目建议从源头避免写内联尺寸，交由 CSS 控制
父容器要有明确宽度约束
浏览器默认把 <img alt="HTML怎么让图片在移动端网页中自适应宽度" > 当作替换元素，max-width: 100% 是相对于父容器计算的。如果父级 <div> 没设宽（比如只写了 <code>float 或没给 width），100% 就失去参照，图片可能按原始尺寸显示甚至溢出。
- 确保父容器有明确宽度，例如：
width: 100%、max-width: 750px或flex-basis: 100% - 在 flex 布局中，
img默认有min-width: auto，会抗拒收缩——加一句min-width: 0就能解决 - 推荐完整写法：
img { max-width: 100%; height: auto; min-width: 0; }
适配不同屏幕还要考虑 srcset + sizes
CSS 控制的是“怎么显示”，但移动端更关键的是“加载哪张图”。小屏设备加载 2MB 的原图，既慢又耗流量。
立即学习“前端免费学习笔记（深入）”；
-
srcset列的是图片源的固有宽度，单位是w，例如："photo-480.jpg 480w, photo-800.jpg 800w" -
sizes要匹配图片容器在各断点下的实际占位宽度，例如：sizes="(max-width: 768px) 100vw, 50vw" - 漏掉
sizes，浏览器默认按100vw选图，大概率选大了；写错（比如写成50%）会导致完全选错源
特殊情况：固定尺寸容器里放任意比例图
比如头像框、卡片封面要求统一为 80px × 80px，但上传的图可能是竖图、横图、正方图——这时不能只靠 max-width。
- 给容器设固定宽高：
width: 80px; height: 80px; - 给图片加：
object-fit: cover;（裁剪填满）或object-fit: contain;（等比留白） - 注意：
object-fit在 IE 不支持，iOS Safari 旧版需加-webkit-object-fit前缀 - fallback 方案可用
background-image+background-size，但会丢失alt和 SEO 价值
