uniapp关于image和view编译为h5变形的问题 最后更新时间：2026年03月12日 ### 问题 源码： ```html <view class="nav-left" @click="goBack"> <image class="nav-back-img" src="/static/images/icons/back.png" mode="aspectFit" /> </view> <style lang=scss spoed> .nav-left{ backgroud-color: rgba(255,255,255,1); } .nav-back-img { width: 48rpx; height: 48rpx; padding: 12rpx;} </style> ``` 使用uniapp编译过程遇到了编译为h5后，image和view的class样式失效变形问题,具体情况为img样式无效，view的背景只显示了半行。 ### 原因 image: 编译成h5之后会变成`<uni-image class="nav-back-img"><img/></uni-image>`。这个img因为h5的关系，没有自适应效果，需要`::v-deep`手工处理下。 view: view编译后实际上display是个line元素，受限于line元素的特性。需要处理为`display: block` ### 解决方案 ```css .nav-left{ backgroud-color: rgba(255,255,255,1); display: block; } .nav-back-img { width: 48rpx; height: 48rpx; padding: 12rpx; ::v-deep img { width: 100%; height: 100%; object-fit: cover; } } ```
Comments | NOTHING