最可靠写法是max-width: 100% + height: auto；它确保图片等比缩放、不溢出、不失真，且兼容ie9+，而width: 100%会强制拉伸小图，仅设max-width不配height: auto则高度塌陷或卡死。
直接用 max-width: 100% + height: auto 是目前最可靠、兼容性最好、也最容易被忽略的底线写法。别指望只写 width="100%" 或只加 width: 100% 就能自动适配——它们要么失效，要么拉伸变形。
为什么 max-width: 100% + height: auto 是黄金组合
这个组合解决的是「缩放不拉伸」和「小图不放大」两个核心问题：
-
max-width: 100%表示“最多占满父容器宽度”，图片原始尺寸小时保持原样，不会被强行拉大 -
height: auto不是可选项——它强制浏览器按原始宽高比反推高度；漏掉它，max-width缩的是宽，高却卡死在原始值，必然失真 - 所有现代浏览器（含 IE9+）都原生支持，无需前缀或 polyfill
- 它不依赖 JS，纯 CSS，渲染快，无布局抖动风险
width: 100% 和 max-width: 100% 实际效果差在哪
关键区别在于是否尊重图片原始尺寸：
-
width: 100%是“必须填满”，哪怕原图只有 200×150，也会被拉成父容器全宽 × 固定高（除非你手动设height: auto，但此时仍可能撑破布局） -
max-width: 100%是“上限约束”，小图保持原尺寸，大图才缩放，更符合响应式预期 - 当父容器本身是弹性（如
max-width: 800px的<div>），<code>max-width: 100%会自然跟随父级缩放；width: 100%则可能在窄屏下把小图标撑得模糊 - 某些老版 iOS WebView 对
width: 100%渲染不稳定，但对max-width: 100%支持良好 - Flex 子项默认
min-width: auto，会阻止内容（包括图片）压缩到小于其“固有尺寸” - Grid 子项同理，若列轨道用了
minmax(300px, 1fr)，图片就卡死在 300px 宽 - 解决方案不是给
img加flex-shrink: 0（那会让它更难缩），而是给它的**父 Flex/Grid 项**加min-width: 0 - 如果父容器是
display: flex的<div>，请确保该 <code><div> 有 <code>min-width: 0；否则max-width: 100%形同虚设HTML
width/height属性能替代 CSS 吗可以，但用途完全不同，且不能混用：
- HTML 的
width="400"和height="300"是像素值（不带单位），浏览器最早识别，用于预留布局空间、防抖动；但它不支持auto或百分比，写width="100%"仅在父容器有明确宽度时才生效，且 IE/旧安卓支持差 - CSS 的
width/height更灵活，但需注意：单独写width: 100%而不配height: auto，或父容器没宽，就会失效 - 二者同时存在时，CSS 优先级更高，会覆盖 HTML 属性——所以不要一边写
width="200"，一边又写img { width: 100% }，容易引发意外交互 - 真正需要“初始占位+响应式缩放”的场景，推荐：HTML 属性设原始尺寸（如
width="800" height="600"），再用 CSS 加max-width: 100%; height: auto;
最常被忽略的一点：图片元数据损坏会导致浏览器读不到原始宽高比，即使写了
height: auto也会失真——这种情况下，aspect-ratio或object-fit才是补救手段，但前提是容器有明确宽高。 - HTML 的
Flex/Grid 容器里图片不收缩？问题不在 img 上
常见现象：写了 max-width: 100% + height: auto，图片依然撑开父容器、溢出或拒绝缩小。根本原因不是样式写错，而是 Flex/Grid 的默认行为锁死了收缩能力：
