max-width: 100% 配合 height: auto 虽能等比缩放，但无法解决长图在窄屏上下溢出与不居中问题；需外层容器设 max-height、overflow-y: auto、display: flex 并配合 align-items: center 实现垂直居中与可控滚动。
max-width: 100% 配合 height: auto 是最直接有效的做法，但仅靠它无法解决“长图在窄屏上缩放后上下溢出、不居中”的问题——这其实是容器高度失控 + 缺少垂直对齐控制导致的。
为什么 max-width: 100% 不够用
长图（比如 800×3000 像素的竖版海报）在小屏（如 375px 宽）下按比例缩放后，宽度变成 375px，但高度会变成约 1406px。如果父容器没有明确高度限制或溢出处理，图片会撑开布局，顶部可能被截断，底部悬空，视觉上完全不“居中”。
常见错误现象：img { max-width: 100%; height: auto; } 写了，但图片在手机上只显示上半截，或者整个页面被拉得极长，用户要滚很久才能看到内容底部。
- 这不是图片没缩放，而是缩放后仍远超视口高度，且默认
display: inline导致垂直对齐基线错位 -
margin: 0 auto只能水平居中，对垂直无效 - 如果父容器是
div且没设height或min-height，浏览器不会自动“框住”长图
让长图真正响应式 + 居中的三步实操
核心思路：限制容器可滚动区域 + 图片强制居中显示 + 防止失真。不是只调图片，而是“容器+图片”协同控制。
- 给图片外层加一个带固定最大高度（或视口单位）的容器，比如
<div class="long-img-container"><img src="..."></div> - 容器设
overflow-y: auto（允许纵向滚动），并用display: flex+align-items: center实现垂直居中 - 图片本身保留
max-width: 100%和height: auto，同时加display: block消除行内元素默认基线间隙
示例 CSS：
`.long-img-container {
max-height: 80vh;
overflow-y: auto;
display: flex;
align-items: center;
justify-content: center;
}
.long-img-container img {
max-width: 100%;
height: auto;
display: block;
}`
object-fit 能不能替代？
不能直接用于 <img> 的 object-fit: contain 看似理想，但它会让图片在容器内“等比缩放并留白”，而长图场景下，你通常希望用户能滚动查看全图，不是把它硬塞进一个固定框里切掉或留大片空白。
-
object-fit: contain+ 固定容器高 → 图片变小、四周留白，信息密度下降，移动端阅读体验差 -
object-fit: cover→ 会裁剪，长图顶部/底部必然丢失内容 - 只有当业务明确要求“必须一屏展示全图（哪怕极小）”时才考虑，否则优先用 flex + overflow 方案
移动端真机测试最容易忽略的一点
忘了加 <meta name="viewport" content="width=device-width, initial-scale=1.0">。没有它，iOS Safari 会以 980px 宽度渲染页面，max-width: 100% 就失效了，长图直接按桌面宽度缩放，看起来比实际还宽、还糊。
另外，某些安卓 WebView 对 vh 单位支持不稳定（比如地址栏收起时 80vh 突然变大），若发现滚动异常，可改用 max-height: 600px 这类固定值兜底，或用 JS 动态设置容器高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
