微信小程序image组件mode属性最近有个需求需要放一张图片、设计稿是350*350, 但是接口返回的图可能是方图(宽

来源

最近有个需求需要放一张图片、设计稿是350*350, 但是接口返回的图可能是方图(宽跟高一致)也可能是长图(宽高不一致), 有部分图片会模糊。

前言

先去官网看看微信小程序的image组件都有哪些属性？你会发现有个mode属性, 根据最新的官方文档, 目前有5种缩放模式、9种裁剪模式。接下来主要围绕这五种缩放模式做下简单对比。
Tips: image组件默认宽度320px、高度240px

演示demo

原图尺寸 300* 168 image组件默认尺寸: 320px * 240px

// wxml
<image class="test" src="../../../../../test.jpg" mode="scaleToFill"/>
<image class="test" src="../../../../../test.jpg" mode="aspectFit"/>
<image class="test" src="../../../../../test.jpg" mode="aspectFill"/>
<image class="test" src="../../../../../test.jpg" mode="widthFix"/>
<image class="test" src="../../../../../test.jpg" mode="heightFix"/>

// wxss
.test {
  border: 1px solid red;
  margin-bottom: 20rpx;
}