max-width: 100% 需配合 height: auto 及有宽度的父容器才能生效，否则易溢出或塌陷；width: 100% 强制拉满但失真；固定容器需搭配 object-fit 和 overflow: hidden；Retina 屏需 srcset + max-width 协同。
直接给 img 加 max-width: 100% 和 height: auto 就能解决绝大多数场景下的自适应缩放问题，但漏掉配套条件或误用其他样式，反而会让它失效。
为什么 max-width: 100% 单独写没用
常见现象是：图片在小屏上依然溢出、被裁切，或者缩放后高度塌陷成一条线。这不是属性本身的问题，而是它依赖几个隐性前提：
-
max-width: 100%是“最大宽度”，不是“强制宽度”——如果父容器没宽度（比如div没设width且内部有浮动/绝对定位未清除），那它的计算基准就是 0，图片也就缩到看不见 - 父容器若设置了
overflow: hidden但没给宽高约束，图片可能被截断却不缩放 - 外部框架（如 Bootstrap 的
.img-fluid）或内联style="width: 300px"会覆盖max-width，优先级更高 - 忘了配
height: auto，浏览器会按默认height: auto计算，但某些情况下（尤其配合display: inline）会塌陷或拉伸
max-width: 100% 和 width: 100% 到底选哪个
关键区别在于是否保留原始尺寸的“尊严”：
-
max-width: 100%：图片比容器小时保持原大小，大时才缩；适合内容图、插图等需要保真度的场景 -
width: 100%：不管原始多小，一律拉满父容器——小图会被强行放大、模糊，只适合你明确控制源图分辨率且要求“填满”的场合（比如 banner 图） - 两者都必须配
height: auto，否则宽高比无法维持
固定容器中想裁剪填充，得加 object-fit
当图片要放进一个固定尺寸的卡片、头像框或封面位时，仅靠 max-width 不够——它只管缩放，不管怎么“塞进去”。这时需要组合使用：
立即学习“前端免费学习笔记（深入）”；
- 先确保外层容器有明确宽高（如
.card-img { width: 300px; height: 200px; }） - 给
img设width: 100%; height: 100%（注意：这里不用max-width，因为容器已定死） - 再加
object-fit: cover（裁剪填满）或object-fit: contain（完整显示留白） - 别忘了
overflow: hidden配合cover，否则裁剪部分会露出来
高清屏（Retina）下图片模糊？srcset 必须配 max-width
max-width: 100% 只管布局缩放，不解决像素密度问题。加载了 @2x 图但没限制尺寸，高倍图可能因原始分辨率太大而溢出容器：
- HTML 中用
srcset提供多倍图：<img src="photo.jpg" srcset="photo.jpg 1x, photo@2x.jpg 2x"> - CSS 仍需保留
max-width: 100%; height: auto，否则@2x图加载后会撑破布局 - 更推荐用
width描述符：srcset="photo-400w.jpg 400w, photo-800w.jpg 800w" sizes="(max-width: 400px) 100vw, 400px"，让浏览器按视口选图
真正卡住人的往往不是 max-width 这一行代码，而是它和父容器宽度、图片原始尺寸、srcset 加载时机之间的隐式耦合。调的时候建议先禁用所有 JS，纯 CSS 下验证缩放是否生效，再逐步叠加功能。
