max-width: 100% 配 height: auto 能等比缩放图片，因为浏览器计算 img 尺寸时优先尊重原始宽高比，max-width 仅设宽度上限不强制拉伸，height: auto 则确保高度按比例自动缩放，二者协同实现防溢出、保比例、不失真。
为什么 max-width: 100% 配 height: auto 能等比缩放图片
因为浏览器在计算替换元素（如 <img>）的尺寸时，若只设 max-width: 100% 且未显式设置 height，会保留其固有宽高比；height: auto 是默认行为，显式写出只是强化语义、避免被其他样式意外覆盖。
关键点在于：这个组合不改变图片原始比例，仅限制宽度上限，高度由浏览器自动按比例推算。
- 如果父容器宽度收缩，图片宽度随之收缩，高度同步缩放
- 如果图片原始尺寸小于容器，它不会被拉伸——
max-width是“上限”，不是“强制宽度” - 若误写成
width: 100%+height: auto，图片会在窄屏下被强行撑满容器宽度，但此时仍等比，只是失去了“不放大原图”的保护
必须给图片父容器设置 width 或触发 BFC 吗
不一定，但常见场景中父容器需要有明确的可用宽度，否则 max-width: 100% 无参照物。比如：
- 父容器是
display: block且没设width→ 默认占满行宽 → 可用 - 父容器是
flex项或grid项 → 通常已有尺寸约束 → 可用 - 父容器是
position: absolute且没设left/right/width→ 宽度为auto→max-width: 100%实际无效 - 父容器内有浮动子元素且未清除 → 可能导致高度塌陷 → 图片实际可缩放区域变小甚至为 0
遇到缩放失效，优先检查父容器是否真实拥有宽度，而不是急着加 width: 100%。
立即学习“前端免费学习笔记（深入）”；
object-fit 和 max-width+height:auto 的根本区别
max-width: 100% + height: auto 是布局层缩放，改变的是图片渲染尺寸；object-fit 是内容层裁剪/适配，图片本身尺寸不变，只是绘制方式变了。
-
object-fit: contain等比缩放并留白 → 类似max-width+height:auto，但即使图片比容器小，也会居中显示，不会“缩小到更小” -
object-fit: cover等比填满 → 必然裁剪，和响应式缩放目标冲突 -
object-fit对<img>有效，但对背景图要用background-size，别混用 - 服务端返回超大图时，
max-width方案仍会下载全量资源；想真正节省带宽，得配合<picture>+srcset
移动端 Safari 中图片模糊或缩放异常怎么办
iOS Safari 对缩放中的位图渲染较敏感，尤其当图片被非整数倍缩放（如容器宽 375.5px）时，容易出现模糊或锯齿。这不是 CSS 错误，而是设备像素比（dpr）与 CSS 像素不匹配所致。
- 确保图片原始分辨率足够高（至少 2x），避免缩放后像素不足
- 避免用
transform: scale()替代max-width—— 后者走 layout 流程，前者走合成层，模糊更明显 - 可加
image-rendering: -webkit-optimize-contrast（仅 Safari）轻微改善，但效果有限 - 真要精细控制，得用
<picture>提供不同 dpr 下的资源，CSS 层只负责布局
响应式图片的本质是“让合适尺寸的图在合适的地方以合适的方式呈现”，max-width + height: auto 解决了最基础的布局缩放问题，但它不解决加载性能、设备适配精度或艺术指导需求——这些得靠更上层的方案补足。
