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

1、fixed定位一个 image标签，width: 100vw;height: 100vh; mode选择aspectFill

2、background-size: cover

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

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

可以通过在image标签上添加bindtap事件，监听小程序点击事件，并在对应的js文件中定义函数，触发相应的 *** 作。如下：

<image bindtap='imageClick' src="xxx" />

// js文件

Page({

imageClick: function () {

// do something

}

})

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

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

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

以上就是关于小程序自适应背景图,不同屏幕比例 如何做到不变形、不留空白全部的内容，包括:小程序自适应背景图,不同屏幕比例 如何做到不变形、不留空白、微信小程序image点击样式怎么设置、小程序进入页面图片渲染会拉伸闪下变形优化.md等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！