问题

源码：

<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

解决方案

.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;
    }
}