CSS响应式图片处理_max-width:100%与height:auto的基础

响应式图片变形的根源是固定height值，正确解法是max-width: 100%与height: auto配对使用，确保等比缩放且不溢出容器。

图片在窄屏里被拉伸变形？先检查 height 是否被固定

响应式图片出问题，八成是因为显式设置了 height 值，比如 height: 200px 或 height: 100%。一旦设了固定高度，max-width: 100% 就救不了它——宽缩了，高还卡死，必然变形。

正确做法是把高度交给浏览器自动算：height: auto 必须和 max-width: 100% 配对出现。

• max-width: 100% 控制图片不溢出容器，但本身不保证等比缩放
• height: auto 是关键补丁，告诉浏览器“按原始宽高比重新计算高度”
• 如果父容器用了 flex 或 grid，还要确认没触发 align-items: stretch 强制拉高

为什么 width: 100% 有时比 max-width: 100% 更危险？

width: 100% 会让图片强行撑满父容器宽度，不管原始尺寸多大——小图会被拉糊，大图可能因分辨率骤降而发虚；而 max-width: 100% 只设上限，原图小就保持原样，更安全。

• 小图标（如 16×16 的 icon.png）用 width: 100% 会像素失真；用 max-width: 100% 则清晰保留
• 大背景图（如 2000×1200）用 width: 100% 可能触发重绘开销，尤其在低端 android 上掉帧
• max-width: 100% + height: auto 是唯一能同时保比例、防溢出、不强制缩放的组合

遇到 Object-fit 就敢乱用？小心覆盖掉 height: auto 的作用

object-fit: cover 或 contain 确实能控制裁剪方式，但它只对已设定尺寸的替换元素生效。如果图片本身没设宽高（靠内容流撑开），object-fit 实际不触发。

立即学习“前端免费学习笔记（深入）”；

• 加了 object-fit 却没配 width/height，等于写了句废话
• 若同时写 width: 100%; height: 200px; object-fit: cover，那就彻底放弃等比缩放，进入“裁剪模式”
• 想兼顾响应式和裁剪，得先用 max-width: 100%; height: auto 保基础行为，再根据需要包裹一层带固定尺寸的容器来启用 object-fit

内联 SVG 或 Base64 图片也要套这组规则吗？

要。SVG 和 Base64 图片本质还是 <img alt="css响应式图片处理_max-width:100%与height:auto的基础" > 元素，CSS 规则照常生效。但有个隐藏坑：部分构建工具（如 webpack 的 url-loader）会把小 SVG 自动转成内联 <svg></svg> 标签——这时 CSS 不再适用，得改用 viewBox 和 preserveAspectRatio 控制缩放。

• 用 <img src="data:image/svg+xml;base64,..." alt="CSS响应式图片处理_max-width:100%与height:auto的基础" >：仍走 img 渲染管线，max-width + height: auto 有效
• 用 <svg></svg> 直接内联：删掉 width/height 属性，只留 viewBox="0 0 100 100"，再加 max-width: 100% 即可响应式
• 没设 viewBox 的内联 SVG，max-width 会失效，图片直接按原始像素渲染

实际项目里最常漏掉的，是那个 height: auto。它不炫技，不出错也不报错，但只要少写这一行，窄屏下所有图片就悄悄开始变形。