max-width: 100% 与 height: auto 必须同时使用才能实现图片等比响应式缩放；单独使用任一属性均会导致变形、溢出或塌陷，且需确保父容器有明确宽度约束。
max-width: 100% + height: auto 是必须同时写的组合
只写 max-width: 100%，图片在小屏下可能缩了，但高度却卡死或塌陷；只写 height: auto 而不加 max-width，图片照常溢出容器。两者缺一不可，浏览器靠这个组合触发等比缩放逻辑。
常见错误现象：
-
max-width: 100%写了，但图片仍拉伸变形 → 很可能是height被其他 CSS（比如img { height: 200px }）或行内height属性覆盖 - 图片在 Safari 移动端显示异常矮 → 多半是漏了
height: auto，iOS WebKit 对缺失该声明更敏感 - 小图被放大模糊 → 不是 CSS 问题，而是父容器没宽度约束，导致
max-width: 100%的“100%”参照的是全屏宽度
父容器没宽度，max-width 就等于没写
max-width: 100% 的百分比是相对于**直接父容器**计算的。如果父 <div> 没设 width、max-width，也没在 flex/grid 中获得有效尺寸，那它的宽度可能是 auto 或 0，此时 max-width: 100% 实际算出来就是 none 或极小值。
排查与解决建议：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用开发者工具的 Computed 面板检查父容器的
width和max-width是否为auto或0 - 给父容器加
width: 100%或max-width: 100%（尤其当它本身是 inline 元素或 float 后未清除时） - Flex 容器中子项默认有
min-width: auto，会锁死图片原始尺寸 → 给父容器加min-width: 0 - 避免图片直接挂在
<body>下且无包裹层，至少套一层<div class="content">
不要用 width: 100% 替代 max-width: 100%
width: 100% 是强制拉满，不管原图多小都会撑开，极易造成模糊和比例失真；max-width: 100% 是“最多不超过”，小图保持原尺寸，大图才缩放——这才是响应式要的效果。
典型误用场景：
- 用 Bootstrap 的
.img-fluid却又额外写了width: 100%，覆盖了原本的max-width行为 - 在卡片组件里给图片设
width: 100%，结果小图标被拉成宽条 - 用
object-fit: cover时误以为可以不用max-width→ 实际上object-fit只控制内容填充方式，不解决溢出问题
srcset 和 sizes 不是可选项，而是高清屏刚需
CSS 缩放再完美，也不能让一张 400px 宽的图在 Retina 屏上清晰显示。这时候必须补上 srcset 和 sizes，否则用户看到的是模糊图，不是“缩放失败”。
关键点：
-
srcset提供多个分辨率源，例如：srcset="photo.jpg 1x, photo@2x.jpg 2x"或按宽度：srcset="photo-480w.jpg 480w, photo-768w.jpg 768w" -
sizes告诉浏览器“这张图在不同断点下大概占多宽”，例如：sizes="(max-width: 768px) 100vw, 50vw" - 即使用了
srcset，也必须保留max-width: 100%和height: auto，否则高倍图加载后可能因原始尺寸过大而溢出 - 真正容易被忽略的是：当图片嵌套在多层容器中时，某一层的
display: inline或float会让宽度计算链断裂 → 加display: block到<img>上往往比调布局更快见效
