微信小程序:图片显示保持纵横比缩放图片显示（mode='aspectFit'）

一语道破

在image标签中加入mode='aspectFit'属性，即可让图片保持纵横比缩放图片。

实现过程

在一个动态页面编辑中，因为要插入图片，理所应当的我加入了image标签，这是加入图片必然的方法。

接下来进行属性的调整，一开始我为图片加一个外层容器，方便调整属性，把图片放进去：

<view class="imageCon">
      <image class='image' src="http://xiemenglei.cn/wp-content/uploads/2019/07/IMG_20190726_183123.jpg"></image>
</view>

接下来我想当然的以为图片的height与width是auto，以为auto的字面意思就是自动，图片就会自动调整，结果设置之后图片的影子都木得了o(╥﹏╥)o！！！（大家自行尝试）

之后便各种网络自学，在微信官方文档里面发现了这么一个神奇的东西 mode ！！！

属性	类型	默认值	必填	说明
mode	string	scaleToFill	否	图片裁剪、缩放的模式

mode 的默认值是scaleToFill，功能是缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素，就不符合我们所需要的。

我们所需要的保持长宽比不变的是aspectFit和aspectFill。

aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

下面是官网给出的实例图片：

根据上面两个图片，不难看出aspectFit最符合我们的要求。

需要注意的是，image组件默认宽度300px、高度225px，所以在使用时，要根据你的需要改变image的大小，我这里改成这样的style="height: 400rpx; width: 620rpx;"

下面是我的部分代码，可供参考学习。

js部分

<view class="imageCon">
      <image class='image' mode='aspectFit' style="height: 400rpx; width: 620rpx;" src="http://xiemenglei.cn/wp-content/uploads/2019/07/IMG_20190726_183123.jpg"></image>
</view>

wxss部分

/**图像的外框**/
.imageCon{
  height: 400rpx;
  border: 1px solid green;
  /**最后一行绿色框线用于测试观察使用**/
}

/**图像**/
.image{
  margin-left: 20rpx;
  margin-right: 20rpx;
  border-radius: 10rpx;
  border: 1px solid green;
}

效果如图所示：


创作不易，欢迎点赞支持！！！
转载请注明出处。