max-width: 100% 配合 height: auto 能让图片自适应又不失真，因为浏览器计算替换元素尺寸时优先尊重原始宽高比；max-width 限制宽度上限不强制拉伸，height: auto 确保高度按比例缩放，二者协同实现等比缩放、防溢出、保比例。
为什么 max-width: 100% 配合 height: auto 能让图片自适应又不失真
因为浏览器在计算替换元素（如 <img>）的尺寸时，会优先尊重原始宽高比；max-width 是限制“宽度上限”，不强制拉伸，而 height: auto 告诉浏览器按比例缩放高度——两者配合，图片既不会溢出容器，也不会被压扁或拉长。
常见错误是只写 max-width: 100% 却漏掉 height: auto，结果图片高度塌陷为 0 或保持原始高度，导致严重变形。
- 必须同时设置
height: auto，否则浏览器可能沿用默认height: auto行为（某些旧版 Safari 会异常） - 如果父容器没有明确宽度（比如
display: flex下未设flex-basis），max-width: 100%可能失效 - 该组合对内联图片有效，但对背景图无效（需用
background-size: contain或cover）
如何防止图片在小屏下被压缩得过小或模糊
单纯 max-width: 100% + height: auto 在极窄视口（如手机竖屏）下会让高清图缩成几像素宽，肉眼难辨。这不是 CSS 问题，而是响应策略缺失。
- 给图片加最小宽度保护：
min-width: 100px（根据业务定，避免缩太小） - 搭配媒体查询，在小屏下改用
width: 100vw并设max-width: none，确保占满视口 - 注意：不要对
<img>设width: 100%，它会覆盖原始宽高比逻辑，导致失真
遇到 object-fit 时，max-width 还管用吗
管用，但作用对象变了。max-width 仍限制图片元素本身的宽度，而 object-fit 控制的是图片内容在该元素框内的填充方式。两者不冲突，但目标不同。
立即学习“前端免费学习笔记（深入）”；
-
max-width: 100%+height: auto→ 控制图片“容器大小” -
object-fit: cover→ 控制图片“内容如何填满容器”（会裁剪） - 混用常见场景：卡片头像（固定容器尺寸 +
object-fit: cover），同时用max-width: 100%防止原始图过大撑破布局 - 注意：
object-fit不支持 IE，若需兼容，只能靠 JS 或服务端生成适配图
为什么有时候图片还是溢出父容器
大概率是父容器本身没约束宽度，或者存在其他 CSS 干扰了块级格式化上下文。最典型的是浮动、绝对定位或 Flex/Grid 容器未设 width 或 flex-shrink。
- 检查父元素是否设置了
width、max-width或flex-basis - 确认没有
white-space: nowrap或display: inline-block导致父容器收缩异常 - 用浏览器 DevTools 查看 computed 样式，重点看
width和max-width是否被继承或重置 - 极端情况：图片在
<table>内，表格单元格默认忽略max-width，需加table-layout: fixed
div 在 Flex 容器里没设 flex 属性，它的 max-width: 100% 就只是相对于自身内容宽度，而不是父容器。 
