小程序自适应背景图,不同屏幕比例 如何做到不变形、不留空白

1、fixed定位一个 image标签，width: 100vwheight: 100vhmode选择aspectFill

2、background-size: cover

     1）是按照图片的比例放大或者缩小至充满容器，而不是按照晌枣容器的比例大小来缩放。

      2）如果照片的比例和容器的比例是不一致的败谨扮，察灶必定会导致照片的不完整性。

有些从接口传递过来的图片，本身图樱缺歼片大小不是固定一个比例，全部渲染显示在页脊冲面上，会有唰得扮链拉伸从大到小快速闪下变形的bug，很影响用户体验。

image的mode图片剪裁缩放模式用 mode='widthFix' (宽度不变，高度自动变化，保持原图宽高比不变)，记得要在css里也加上height:auto，可以消除渲染拉伸变形一闪而过的bug。

image 的mode有13种模式，4种是缩放模式，9种是剪裁模式。

---