max-width: 100%失效主因是父容器无宽度约束或被其他样式覆盖；应配合height: auto、检查样式优先级，并区分object-fit用途。
img标签加max-width: 100%为什么没用
常见现象是：写了max-width: 100%，但图片还是溢出容器、不随屏幕变小。根本原因不是写法错，而是父容器没约束宽度，或者img被其他样式覆盖（比如width: auto被重置、display变成block后又没设height: auto）。
实操建议：
- 确保父容器有明确宽度（比如
div设了width或max-width），否则100%无参照 - 给
img同时加max-width: 100%和height: auto，防止拉伸变形 - 检查是否有更高优先级的
width内联样式或CSS规则，用浏览器开发者工具看computed值 - 避免对
img设width: 100%——它会强制撑满，失去“最大不超过”的弹性
CSS中object-fit和max-width的区别
max-width: 100%只控制宽度上限，高度按比例缩放；object-fit则决定图像如何填充容器（类似background-size）。两者常混用，但解决的是不同问题。
使用场景：
立即学习“前端免费学习笔记（深入）”；
- 响应式头图、内容图 → 优先用
max-width: 100%; height: auto - 卡片内固定尺寸容器（如
160px × 160px）要裁切/居中显示头像 → 用object-fit: cover+width: 100%; height: 100% -
object-fit: contain适合需要完整显示图标或图表的场景，但要注意留白 - IE不支持
object-fit，需用background-image降级方案
内联SVG或picture元素要不要也设max-width
要，但方式不同。SVG本身是矢量，设max-width: 100%有效；picture是容器，真正起作用的是它包裹的img或source子元素。
实操注意点：
- 对
svg标签设max-width: 100%+height: auto，并确保没有viewBox缺失（否则缩放可能异常） -
picture里每个source不处理尺寸，尺寸逻辑全在img上，所以img必须保留max-width: 100%和height: auto - 如果用
srcset配合sizes，max-width依然生效——它限制的是最终渲染的img尺寸，不是下载哪张图
移动端双倍屏（Retina）下图片模糊怎么办
max-width: 100%本身不解决清晰度问题。模糊是因为CSS像素缩放后，浏览器用低分辨率图拉伸渲染。关键在提供高DPR素材，而非CSS缩放逻辑。
解决方案：
- 用
srcset提供2x图：<img src="a.jpg" srcset="a@2x.jpg 2x" alt="HTML怎么设置图像响应式缩放_HTML max-width 100%实现教程【适配】" > - 用
picture配合media查询做更精细控制：<source media="(min-resolution: 2dppx)" srcset="a@2x.jpg"></source> - 确保高分图尺寸是标准图的2倍（比如标准图
400×300，@2x应为800×600），否则缩放仍模糊 - CSS中
max-width照常写，它和DPR无关，只是让高分图也能正确约束尺寸
最常被忽略的是：以为加了max-width就自动适配高清屏，其实它只管布局，不管像素密度。得靠srcset或picture把对的图送过去，max-width才不会“缩错对象”。
