必须同时设置max-width: 100%、height: auto和display: block，且父容器需有明确宽度；否则因参照缺失、内联样式覆盖或行内元素间隙等问题导致失效。
img 设置 max-width: 100% 为什么没效果
写了 max-width: 100% 却不缩放，大概率不是语法错，而是缺少关键配合项或被其他样式压制。常见原因包括：
- 父容器没有明确宽度（比如
div没设width或max-width），100%就失去参照基准 - 图片上还挂着
width属性（如width="600"）或内联style="width: 600px"，它会覆盖max-width的弹性限制 - 没加
height: auto，导致浏览器按默认高度渲染，图片被拉伸或截断 - CSS 选择器优先级不够，被更高权重的规则（如 ID 选择器、
!important）覆盖
用浏览器开发者工具检查「Computed」面板，看最终生效的 width 和 max-width 值，比猜更准。
只用 CSS 实现响应式最大宽度（推荐做法）
最稳妥的写法是组合使用三个声明，缺一不可：
img {
max-width: 100%;
height: auto;
display: block;
}
说明：
立即学习“前端免费学习笔记（深入）”；
-
max-width: 100%：限制图片宽度不超过父容器，但不会强制撑满——原图小就保持原大小 -
height: auto：确保高度随宽度等比缩放，避免变形 -
display: block：消除img默认的inline行内行为带来的底部空白（这个细节常被忽略）
如果只想作用于某类图片，可加 class：<img src="x.jpg" class="responsive-img">，再写 .responsive-img { ... }。
HTML width 属性和 CSS max-width 能混用吗
能，但不建议。HTML 的 width 属性（如 width="50%"）会直接设置为 width 样式，优先级高于外部 CSS 中的 max-width，结果就是 max-width 失效。
如果你看到这样的代码：<img src="a.jpg" width="50%" style="max-width: 100%;">，实际效果是固定为父容器的 50%，而不是“最多 100%”。
正确做法是：删掉 HTML 中的 width 和 height 属性，全部交给 CSS 控制。
百分比单位到底参照谁
max-width: 50% 的 “50%” 是相对于**最近的块级父容器的宽度**。例如：
- 如果
img在一个<div style="width: 400px;">里，50%就是 200px - 如果父
div宽度是max-width: 600px且自身没设width，那它的实际宽度取决于内容或视口，此时50%仍按它当前计算出的宽度算 - 如果父元素是
position: absolute且没设宽高，%可能失效或回退到初始包含块（通常是视口）
所以，别假设百分比一定“安全”，得确认父容器有可计算的宽度上下文——这是最容易漏查的一环。
真正让 max-width: 100% 可靠工作的，从来不是单写这一行，而是整套约束：父容器有宽、图片不带内联宽高、height: auto 同在、display 行为干净。少一个，就可能在某个设备或嵌套层级里突然失效。
