正确做法是用 max-width: 100% 配合 height: auto 实现等比缩放；需避免同时设 width 和 height；固定高度需求用 object-fit + 容器约束；资源优化应配合 srcset 和 sizes。
图片在小屏幕下被裁剪或溢出容器怎么办
直接给 img 设置固定宽高，是响应式失效的常见源头。正确做法是用 max-width: 100% 配合 height: auto，让图片按比例缩放、不突破父容器边界。
-
max-width: 100%表示“最大只能等于父容器宽度”，比实际图片窄时就缩小，比父容器宽时就等比压缩 -
height: auto是关键——它保留原始宽高比，避免拉伸变形 - 不要同时设
width和height（哪怕带!important），否则会强制拉伸或压扁 - 如果父容器本身没设宽（比如
div默认 100%），那图片缩放基准就是视口宽度；若父容器有max-width: 600px，图片就以 600px 为上限
为什么只写 max-width: 100% 不够
漏掉 height: auto 会导致浏览器按默认规则处理高度：有的渲染为 0，有的保持原始高度，结果就是图片被压扁、错位或下方留大片空白。
- Chrome/Firefox 在无
height声明时，会尝试从图片文件读取原始尺寸；但加载失败或跨域图片可能返回 0，造成不可见 - Safari 对未声明
height的图片更敏感，容易触发重排抖动 - 写全
max-width: 100%; height: auto;才是稳定解，所有现代浏览器都按此行为一致缩放
需要等比缩放到固定高度时怎么处理
比如卡片图统一高 200px，又不能变形——这时不能靠 height: 200px 硬设，得换思路：
- 用
object-fit: cover+ 固定容器尺寸：给包裹img的div设width: 100%; height: 200px; overflow: hidden;，再给img加width: 100%; height: 100%; object-fit: cover; - 若必须保持完整内容可见，改用
object-fit: contain，但会有上下/左右留白 - 注意
object-fit不支持 IE，如需兼容，得用背景图 +background-size: contain/cover替代
移动端图片模糊或加载慢的连带问题
max-width: 100% 只管缩放逻辑，不管资源本身质量。小屏设备用大图缩放，既浪费带宽又易模糊。
立即学习“前端免费学习笔记（深入）”；
- 优先用
srcset提供多分辨率源：
- 配合
sizes属性告诉浏览器当前布局下图片占多宽，让浏览器选最合适的资源 - 别依赖 CSS 缩放“救”高清图——Retina 屏上 2x 图若只靠
max-width缩小，仍可能因插值算法变糊；原图尺寸尽量贴近显示尺寸
max-width: 100% 和 height: auto 这组组合看似简单，但常被覆盖、遗漏或和 JS 操作冲突。尤其当图片在懒加载、动画入场、或者 Flex/Grid 容器中时，要额外检查父级是否设置了 min-width 或 flex-shrink: 0，这些都会干扰它的生效。 
