微信小程序 图片等比例缩放（图片自适应屏幕）

下面是“微信小程序 图片等比例缩放”的完整攻略：

1. 问题背景

在微信小程序开发中，我们经常会使用到图片，但是由于不同设备尺寸的差异，以及不同图片大小的差异，会导致在小程序中显示的图片大小不一致，影响了小程序的美观度和用户体验度。因此，有必要实现图片自适应屏幕，并且保持图片等比例缩放的效果。

2. 解决方案

2.1 使用 rpx 单位

rpx 是小程序的一种尺寸单位，可以根据屏幕宽度进行自适应缩放，从而实现不同设备上显示的大小一致。因此，在小程序中设置图片的 width 和 height 时，通常应该使用 rpx 作为单位。

2.2 使用样式表设置图片样式

在小程序中，可以使用样式表（或 style 标签）来设置图片的样式，包括宽度，高度等属性。同时，也可以设置图片的 display 属性为 block，这样可以使图片以块级元素的方式显示，从而支持设置宽度和高度属性。

2.3 使用 image 组件

在小程序中，可以使用 image 组件来显示图片。通过该组件的 mode 属性，可以设置图片的缩放模式，从而实现图片等比例缩放的效果。

mode 可以设置为下列值中的一种：

• aspectFit：等比缩放图片以显示全部内容
• aspectFill：等比缩放图片以填充满容器
• widthFix：宽度不变，高度自动变化，保持原图宽高比不变
• heightFix：高度不变，宽度自动变化，保持原图宽高比不变
• center：不缩放图片，显示图片的中心部分

其中，aspectFit 和 aspectFill 都是等比例缩放图片的方式。

3. 示例说明

3.1 使用 rpx 和样式表实现图片自适应屏幕

下面的代码实现了将图片的宽度设置为屏幕宽度的一半（即屏幕宽度的 50%），同时保持图片高度的等比例缩放。

<image src="https://example.com/image.jpg" class="image"></image>

<style>
.image {
  width: 50%;
  height: auto;
}
</style>

3.2 使用 image 组件实现图片等比例缩放

下面的代码实现了通过 image 组件将图片等比例缩放到屏幕宽度的 80% 的效果。

<image src="https://example.com/image.jpg" mode="aspectFit" style="width: 80%;"></image>

以上就是本文的完整攻略，通过使用 rpx 单位、样式表和 image 组件，可以实现图片在小程序中的自适应屏幕，并且保持等比例缩放的效果。