正确做法是 max-width: 100% + height: auto，且父容器需有有效宽度约束；仅 width: 100% 会导致图片变形，因高度不联动计算；漏掉任一声明或父容器无宽都会失效。
直接用 width: 100% 是错的，90% 的图片变形都出在这里；真正安全的做法是 max-width: 100% + height: auto，且父容器必须有有效宽度约束。
为什么不能只写 width: 100%
浏览器看到 width: 100% 就会强制拉宽，但高度不会联动计算——它要么继承一个意外值，要么按默认规则撑满，结果就是图片被横向压扁或纵向拉长。尤其在卡片、文章正文、Flex 子项里，这种变形非常明显。而 max-width: 100% 表示“最多不超过父容器宽度”，小图保持原尺寸，大图才缩放，更符合响应式本意。
max-width: 100% + height: auto 必须同时存在
这两个声明是绑定生效的：
-
max-width: 100%限制宽度上限，但不干预高度计算逻辑 -
height: auto才真正触发浏览器用原始宽高比反推高度 - 漏掉任意一个，等比缩放就失效；哪怕只加了
height: auto而没设max-width，图片仍可能溢出容器
典型写法：
img { max-width: 100%; height: auto; }
立即学习“前端免费学习笔记（深入）”；
父容器没宽度，max-width: 100% 就等于没写
max-width: 100% 的“100%”是相对于父容器宽度计算的。如果父 <div> 是空的、<code>display: inline、没设 width 或处于未定义主轴尺寸的 Flex 容器中，那这个百分比就失去参照，图片照样溢出。
- 确保父容器有明确宽度来源：比如
width: 100%、max-width: 1200px、或处在 Grid/Flex 流体布局中 - 检查是否有行内
height属性或 CSS 中的height: 200px类规则，它们会覆盖height: auto - 避免给
<img alt="HTML如何利用百分比单位设置响应式图片宽度" >加display: block以外的 display 值（如inline），否则可能因换行空白影响高度渲染
需要裁剪固定比例时，别用 <img alt="HTML如何利用百分比单位设置响应式图片宽度" > 标签
如果目标不是“等比缩放”，而是“保持 1:1 或 4:3 并自动裁剪多余部分”，<img alt="HTML如何利用百分比单位设置响应式图片宽度" > + CSS 宽高控制做不到可靠裁剪——object-fit: cover 虽然可用，但在老版 Safari 和 IE 中支持差，且对父容器尺寸依赖强。
- 更稳的方案是改用背景图容器：
<div style="background-image: url(...); background-size: cover;"> <li>配合 <code>padding-top百分比（如 1:1 →padding-top: 100%）创建固有比例容器 - 此时
height: 0+padding-top是关键，它让容器高度由宽度驱动，不受内容影响
复杂点在于：这种写法无法被搜索引擎识别为图片，alt 文本也丢失；若 SEO 或可访问性重要，得权衡是否值得换方案。
