根本原因是视口适配与图片固有宽高比冲突；需用aspect-ratio锁定容器比例，object-fit控制缩放方式，object-position锚定关键内容，并用env(safe-area-inset-top)适配刘海屏。
移动端详情页首图在不同机型上“被裁切”“留白过多”“拉伸变形”，根本原因是没处理好视口适配与图片固有宽高比之间的冲突。直接给 img 设 width: 100% 或 height: 100vh 都会出问题——前者不保比例，后者常被顶部导航栏挤掉空间。
为什么max-width: 100% + height: auto 不够用？
这套组合确实能防溢出，但只解决“不撑破容器”的问题，不解决“是否填满可用区域”或“是否保留关键内容”。比如 iPhone SE（375px 宽）和 iPhone 15 Pro Max（430px 宽）下，同一张 750×1200 的图，按比例缩放后高度相差近 15%，顶部商品标题可能被截掉，或者底部留大片空白。
- 纯
max-width: 100%会让图片高度随宽度线性缩放，但首图区域高度往往由内容或设计稿固定（如height: 50vh），此时图片实际渲染高度 ≠ 容器高度 → 出现上下留白 - 若用
object-fit: cover强制填满，又容易裁掉人物脸部或商品主视觉 - 部分安卓 WebView 对
object-fit支持不稳定（尤其 Android 4.4–6.0），可能退化为拉伸
用aspect-ratio + object-fit 控制容器与内容关系
现代方案的核心是：先用 aspect-ratio 锁定首图容器的宽高比（如 3/4、9/16），再让图片在其内按需缩放。这样无论屏幕多宽，容器自身高度自动计算，图片再用 object-fit 精确控制呈现方式。
示例代码：
.hero-image {
width: 100%;
aspect-ratio: 3 / 4; /* 保证容器始终是 3:4 */
background-color: #f5f5f5;
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover; /* 或 contain，按需选 */
object-position: center top; /* 关键：把商品主体往上锚定，避免被裁 */
}
-
aspect-ratio是 CSS Level 4 标准，Chrome 88+、Firefox 89+、Safari 15.4+ 均支持；旧浏览器可 fallback 到 padding-bottom 技巧（但需额外 wrapper） -
object-position比默认的center center更可控——电商首图常需突出顶部商品名或 logo，设为center top能确保这部分始终可见 - 慎用
object-fit: fill，它会强行拉伸，破坏商品质感
适配刘海屏/挖孔屏时的顶部安全区处理
iPhone X 及后续机型、部分安卓旗舰的顶部状态栏会侵入页面，如果首图容器紧贴 顶部，图片上沿可能被遮挡或压缩。
- 必须加
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，否则env(safe-area-inset-top)不生效 - 首图容器外层加
padding-top: env(safe-area-inset-top)，内部图片用margin-top: -env(safe-area-inset-top)抵消，实现“视觉上顶到屏幕最上，但内容不被遮” - 不要依赖 JavaScript 动态读取
screen.height，不同系统对“可用高度”的定义不一致，CSS 原生方案更稳
真正难的不是让图“显示出来”，而是让关键信息在所有机型上“稳定可见”。aspect-ratio 定容器、object-position 定焦点、env() 定边界——这三个点漏掉任意一个，都可能在某款真机上翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
