<p>uni-app H5端图片拉伸问题需显式设置容器宽高并配合object-fit：因width:100%+height:auto在flex等布局下易失效，H5端应使用# ifdef H5条件编译，设width:100%;height:100%;object-fit:contain，并避免rpx导致的高刷屏像素漂移。</p>
uni-app H5端图片拉伸：别信width: 100% + height: auto能自动适配
这个组合在 H5 端看似合理，但实际常失效——尤其当父容器是 flex 布局或含 padding/margin 时，height: auto 会被忽略，浏览器按默认行内元素规则计算高度，结果就是图片被压扁或撑高。H5 渲染引擎（WebKit/Blink）对 auto 高度的解析不如桌面端稳定，移动端更易出问题。
实操建议：
- 显式设置容器宽高，例如
.img-wrap { width: 100%; height: 300px; }，再让图片在其内约束缩放 - 用
object-fit替代传统尺寸控制：.img { width: 100%; height: 100%; object-fit: contain; } - 必须加
#ifdef H5条件编译包裹，避免污染小程序或 App 端样式 - 慎用
rpx控制容器高度——H5 端 rpx 是 JS 动态转换，高刷屏（如 120Hz）下存在像素计算漂移，视觉上像“轻微拉伸”
为什么object-fit: contain有时还是留黑边？
留黑边不是 contain 的 bug，而是它严格遵守“完整显示+等比缩放”的语义。当容器宽高比与图片原始宽高比差异大时（比如竖图放进横容器），contain 只能缩到短边贴边，长边必然留空。
常见场景和应对：
- 轮播 Banner 图：固定容器比例（如
aspect-ratio: 3/2），再设object-fit: cover+object-position: center，确保关键区域不丢 - 用户头像上传预览：用
object-fit: cover+border-radius: 50%，裁剪比拉伸更符合 UI 习惯 - 图文详情页图片：优先用
mode="widthfix"（仅 H5 编译），配合max-height: 60vh防止超高图撑爆页面 - 若必须全显无裁剪，且允许容器随图变高，改用 JS 动态注入
height: auto样式——但需监听load事件，否则取不到真实尺寸
background-image 拉伸：cover 不是万能解药
background-size: cover 在 H5 端确实可用，但拉伸感往往来自容器本身没控好比例，而非 cover 失效。比如用 height: 100vh，软键盘弹出后视口高度突变，背景图重绘时被临时压缩，看起来像“闪一下就拉伸了”。
可靠写法：
- 背景图务必挂载在独立
<div>上，设position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; -
background-size: cover必须配background-position，不能依赖默认center；人像类图用background-position: top center，底部有按钮的用bottom center - 加响应式兜底：
@media (max-height: 600px) { background-size: contain; }，专治软键盘顶起后的裁切 - 禁用
background-attachment: fixed——H5 端滚动时重绘异常频发，尤其安卓 WebView
nvue 页面里图片变形？别用 CSS 背景，改用 <image> 组件
uni-app 的 vue 页面在 H5 端走的是标准 DOM 渲染，而 nvue 页面在 App 端走原生渲染，但 H5 端 nvue 实际仍降级为 WebView。此时若在 nvue 中写 background-image，行为不可控，cover 可能被忽略，contain 可能不生效。
正确做法是统一用 <image> 组件，并只在 H5 编译下启用其能力：
<image src="{{url}}" mode="aspectfit" class="h5-only"></image>- CSS 中
.h5-only { width: 100%; height: auto; }，并用#ifdef H5包裹整个样式块 - 避免在 nvue 中混用
background-image和<image>，跨端编译时容易漏掉条件判断，导致某端完全不显示 - 如果图是动态 URL（如用户上传），先调
uni.getImageInfo拿宽高比，再决定用aspectfit还是widthfix，比硬写 mode 更稳
最易被忽略的一点：H5 端的 mode 属性本质是靠 JS 注入 object-fit 实现的，所以它只在 <image> 组件上生效，对任何自定义 class 或 background 都无效——这点和小程序、App 端完全不同。
