用 max-width: 100% 和 height: auto 可使图片自适应容器不撑破、不变形；需避免仅设 width: 100% 或遗漏 height: auto，禁用 img 标签内联 width/height 属性，优先用 css 控制，并配合 srcset 优化加载性能。
直接用 max-width 控制图片不撑破容器
绝大多数情况下，你不需要改 HTML 结构，只加两行 CSS 就能解决问题。核心就是给 img 元素设置 max-width: 100% 和 height: auto。这样图片宽度不会超过父容器，高度按比例缩放，不拉伸不变形。
常见错误是只写 width: 100% —— 这会让小图被强行拉宽、模糊；或者只写 max-width 却漏掉 height: auto，导致高度固定、比例错乱。
- 必须同时设置：
max-width: 100%+height: auto - 作用对象是
img标签本身，不是父div - 如果父容器有 padding 或 border，
max-width: 100%会相对于它的 content box 计算，通常没问题
img 标签里写 width 属性不如 CSS 灵活
有人习惯在 HTML 里直接写 <img src="x.jpg" style="max-width:90%">，这看似简单，但实际限制很大：它把宽度写死成像素值，无法响应不同屏幕；而且一旦父容器比 500px 还窄，图片照样会溢出。
更麻烦的是，width 和 height 属性在现代 HTML 中已不推荐用于布局控制——它们只影响渲染尺寸，不参与 CSS 盒模型计算，容易和后续样式冲突。
- 避免在
img标签中使用width或height属性做响应式控制 - 若需预设尺寸（如防止 CLS 布局偏移），可用
width和height配合aspect-ratio，但优先走 CSS 方案 - 真正要限制最大宽度，CSS 的
max-width是唯一可靠路径
IE6 不支持 max-width？现在基本不用管了
早年资料常提醒“IE6 不兼容 max-width”，但现在（2026 年）IE 已彻底退出主流支持，连 Edge 都默认用 Chromium 内核。只要你不是维护一个 2008 年的老系统，这条兼容性警告可以直接忽略。
真正需要注意的反而是某些 CMS 或富文本编辑器会自动往 img 标签里塞内联 style，比如 style="width: 600px;"，这会覆盖你写的 max-width。遇到这种情况，得用更具体的 CSS 选择器或加 !important（不推荐，应优先清理冗余内联样式）。
- 现代浏览器全部支持
max-width，包括 Safari、Chrome、Firefox、Edge - 若页面仍需兼容 IE11，
max-width依然可用，无需降级方案 - 真正干扰生效的，往往是其他样式或编辑器自动生成的内联规则
图片太大时，光靠 max-width 不够，还得考虑加载体验
max-width: 100% 只解决显示问题，不解决资源浪费。一张 4000×3000 的大图，即使缩成 300px 宽，浏览器还是会下载完整体积，拖慢首屏速度。
这时候就得配合 srcset 和 sizes，让浏览器根据设备像素比和视口宽度，自动选更小的资源。比如：
@@##@@
-
max-width是显示层控制，srcset是资源层优化，两者互补 - 没有
srcset时，max-width至少保证不撑破布局；有了srcset，才能真正兼顾性能与体验 - 如果项目用的是 CMS 或图床，注意它们是否自动注入
srcset，避免重复配置
真正难的不是写那两行 CSS，而是判断图片是否该压缩、是否该提供多倍图、父容器有没有 padding 影响计算——这些细节不处理，max-width 再标准也救不了布局崩坏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
