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

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

2、background-size: cover

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

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

wxml部分：

<image src="/images/xwbannerpng" mode="widthFix" bindload="imageLoad" style="width:{{ images[index]width }}rpx; height:{{ images[index]height }}rpx;" ></image>

wxss部分：

image{

width：100%；

}

js部分：

Page({

data: {

images:{}

},

imageLoad: function(e){

var $width=edetailwidth, //获取真实宽度

$height=edetailheight,

ratio=$width/$height; //的真实宽高比例

var viewWidth=718, //设置显示宽度，左右留有16rpx边距

viewHeight=718/ratio; //计算的高度值

var image=thisdataimages;

//将的datadata-index作为image对象的key,然后存储的宽高值

image[etargetdatasetindex]={

width:viewWidth,

height:viewHeight

}

thissetData({

images:image

})

},

})

如果您发现小程序在底部特别小，可能是因为您的手机屏幕分辨率较高，导致小程序图标显示较小。您可以尝试以下方法：

1 调整手机显示比例：在手机设置中找到“显示”或“屏幕显示”选项，尝试调整显示比例或放大倍数。

2 调整小程序显示设置：在小程序中，点击右上角的“设置”按钮，找到“显示设置”选项，尝试调整“图标大小”或“字体大小”。

3 更换手机壳或屏幕保护膜：一些手机壳或屏幕保护膜可能会影响屏幕显示效果，尝试更换一种透明度较高的壳或膜。

4 更新小程序版本：有时候旧版本的小程序可能存在显示问题，尝试更新小程序到最新版本。

如果以上方法都无法解决问题，建议联系小程序客服或手机厂商客服进行咨询。

要知道原的长宽

要知道canvas的长宽

算出比例。先要判断原的宽度是不是大于高度，如果宽度大于高度，那么计算比例是canvas的宽度 / 原宽度 = 比例，假设原图宽度770，高度590，canvas是宽度600，高度300，那么比例就是 600 / 770 = 07792207792207793，用原的宽度乘以这个比例得出来就是600，770  07792207792207793 = 600，然后乘以高度 590  07792207792207793 = 4597402597402598。如果高度比宽度的值大就把canvas的高度 / 原高度，最后用得出来的比例计算canvas高度和宽度。

用drawImage写入到canvas上。

以上就是关于小程序自适应背景图,不同屏幕比例 如何做到不变形、不留空白全部的内容，包括:小程序自适应背景图,不同屏幕比例 如何做到不变形、不留空白、小程序的image怎么自适应大小、小程序在底部特别小等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！