最可靠方案是max-width: 100%; height: auto;，二者必须成对使用以实现等比缩放；单独使用或缺失父容器宽度约束会导致变形、溢出或失效。
直接给 <img> 加 max-width: 100% 和 height: auto 就能自由收缩，但几乎所有人都在这一步踩坑——不是没效果，就是缩完变形、模糊或溢出。关键不在图片本身，而在它所处的上下文。
为什么 max-width: 100% + height: auto 必须成对出现
只写 max-width: 100%，浏览器会限制宽度，但高度仍按原始尺寸或行高渲染，小图被拉高、大图被压扁；只写 height: auto 而不限宽，图片照常以原始像素宽渲染，窄屏直接撑破容器。
这两个声明是绑定生效的：前者设上限，后者按比例推导实际高度。缺一不可，也不能用 width: 100% 替代——那会强制等比拉伸小图，导致像素模糊。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 卡片里的头像被纵向拉长，像“瘦脸滤镜”一样
- 文章配图在手机上只显示左半边，右边被切掉
- 一张 200×150 的小图在大屏上被拉到 1200px 宽，明显糊
父容器没宽度，max-width: 100% 就等于白写
max-width: 100% 的 “100%” 是相对于父容器计算的。如果父 <div> 没设宽（比如只有 display: block），它的宽度默认是视口全宽，这时 max-width: 100% 就退化成“最多占满屏幕”，完全起不到约束小图的作用。
实操建议：
- 给图片外层容器加明确宽度约束，例如
max-width: 800px或width: 90% - 避免父容器有
position: absolute或固定left/top偏移，这类元素脱离文档流，宽度计算失效 - 检查是否被全局 CSS（如 Bootstrap）覆盖了，比如
img { max-width: none !important } - 移除
<img>标签上的height="300"这类行内属性，它会直接覆盖height: auto
Flex/Grid 布局里图片不收缩？问题在父项，不在图片
在 display: flex 或 display: grid 容器中，<img> 默认具有最小尺寸保护（min-width: auto），哪怕你写了 max-width: 100%，它也会把整个 flex item 撑开。
解决方法不是给图片加 min-width: 0（虽然有时管用），而是给它的**直接父 flex/grid 子项**加：
-
min-width: 0（对 flex item）或min-inline-size: 0（更规范） - 配合
overflow: hidden防止内容溢出 - 必要时加
align-self: center垂直居中，避免 baseline 对齐造成的底部空白
别试图用 flex-shrink: 1 强压图片——对替换元素效果极不稳定，且 Safari 有兼容性问题。
要裁剪又保持比例？别用 object-fit 混淆目标
object-fit: cover 不是响应式缩放方案，它是为**已知固定尺寸容器**设计的。比如一个 200px × 200px 的头像框，里面塞进各种比例的图，靠 object-fit 控制怎么“塞”。它对窗口缩放本身毫无作用。
如果你真需要固定宽高比（如 4:3 banner 区），正确做法是用 padding-bottom 技巧构造容器：
.aspect-ratio-4x3 {
width: 100%;
height: 0;
padding-bottom: 75%; /* 3/4 = 75% */
background-image: url(photo.jpg);
background-size: cover;
background-position: center;
}
这种写法让容器自身随窗口缩放，再把图当背景铺满，才是可控的“缩放+裁剪”组合。而 <img> + object-fit 在无显式宽高的容器里，根本不会触发裁剪逻辑。
真正容易被忽略的是：所有这些 CSS 缩放，都只是视觉层面的“变小”，浏览器依然下载原图。如果没配 srcset 和 sizes，移动端可能加载 4K 图再缩成 300px 显示——既慢又费流量。
