微信小程序背景图片满屏自适应

1,980 阅读1分钟

Html部分

```
<view class="headercontent">
      <view class="content">
            <image class="contentImage" src="图片链接" mode="widthFix"></image>
      </view>
</view>
```

Css部分

```
page {
      background-color: #AFD145;
}

.contentImage {
      width: 100vw;
}
```

总结

满屏图片主要用到了小程序image标签的mode属性详情可参考[微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/image.html)
对于在图片上编辑便可用定位来实现
如本文有幸被大佬阅读,欢迎指点!