用 max-width: 100% 配合 height: auto 可使图片随容器缩放且保持宽高比；它设宽度上限而不强制拉伸，比 width: 100% 更安全，适用于所有 img 标签，但需父容器有明确宽度。
图片在响应式布局中显示过大或变形，核心原因是没让图片随容器缩放。用 max-width: 100% 配合 height: auto 就能解决——它让图片宽度不超父容器，同时保持原始宽高比。
为什么 max-width: 100% 比 width: 100% 更安全
width: 100% 会强制拉伸图片填满容器，小图会被撑模糊；而 max-width: 100% 只设上限，图片在小屏下自动缩小，大屏下保持原尺寸（不放大），更符合“响应式”本意。
- 适用于所有 img 标签，无需额外 class
- 配合
height: auto确保等比缩放，避免压扁或拉长 - 父容器需有明确宽度（如设置了百分比、rem 或 flex/grid 布局）才生效
常见失效场景及修复方法
加了 max-width 却没效果？大概率是父级限制没到位或被其他样式覆盖。
- 父容器没设宽度（比如 div 默认 width: auto，但未参与流式布局）→ 给父级加
width: 100%或使用 flex/grid 容器 - 图片被设了固定 width/height 行内样式 → 用
!important覆盖，或改用 CSS 类统一控制 - 图片在
object-fit容器里（如背景图或 video）→ 对 img 本身仍要用max-width: 100%; height: auto，不要和object-fit混用
进阶：适配高清屏与多图场景
单靠 max-width 能解决基础缩放，但想兼顾清晰度和加载效率，可叠加响应式方案：
立即学习“前端免费学习笔记（深入）”；
- 用
srcset+sizes属性提供多分辨率图片，浏览器自动选最匹配的 - 对头图/轮播图等重要图片，添加
loading="lazy"延迟加载 - 若需图片裁剪居中（如卡片缩略图），用
object-fit: cover+ 固定宽高容器，此时max-width不再适用，需换思路
不复杂但容易忽略：一行 CSS 就能守住图片的适应性，关键是理解它依赖父容器的流动逻辑，而不是孤立设置图片本身。
