微信小程序开发img、image标签居中裁剪以及mode属性详解

微信小程序开发中的 img和image 标签具有一个特殊的属性 mode，用于控制图片的裁剪、缩放和填充等行为。该属性不同于 HTML 中的 img 标签，仅适用于微信小程序开发。

mode属性详解

mode 属性有不同的取值，包括 scaleToFill、aspectFit、aspectFill、widthFix、top、bottom、center、left、right 等，用于实现不同的图片显示效果。例如，scaleToFill 可以将图片拉伸至填充整个容器，而 aspectFit 可以保持原始宽高比并将图片缩放至容器内部，留白部分用背景色填充。

mode 属性在微信小程序中非常有用，特别是当你需要在小程序中显示各种不同大小的图片时。通过指定不同的 mode 值，你可以轻松地控制图片的显示效果，使其更加美观和适应不同的场景需求。

微信小程序中的<img>标签的mode属性用于控制图片的缩放和裁剪方式。该属性有以下取值：

• scaleToFill：不保持纵横比缩放图片，使图片的宽高完全拉伸至填满<image>元素。
• aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来，短边按比例缩放，显示在<image>元素的中间。
• aspectFill：保持纵横比缩放图片，使图片的短边能完全显示出来，长边按比例缩放，显示在<image>元素的中间。
• widthFix：宽度不变，高度自动变化，保持原图宽高比不变。
• top：不缩放图片，只显示图片的顶部区域，图片的宽度会被拉伸至填满<image>元素。
• bottom：不缩放图片，只显示图片的底部区域，图片的宽度会被拉伸至填满<image>元素。
• center：不缩放图片，只显示图片的中间区域，图片的宽度会被拉伸至填满<image>元素。
• left：不缩放图片，只显示图片的左边区域，图片的宽度会被拉伸至填满<image>元素。
• right：不缩放图片，只显示图片的右边区域，图片的宽度会被拉伸至填满<image>元素。
• topLeft：不缩放图片，只显示图片的左上边区域，图片的宽度会被拉伸至填满<image>元素。
• topRight：不缩放图片，只显示图片的右上边区域，图片的宽度会被拉伸至填满<image>元素。
• bottomLeft：不缩放图片，只显示图片的左下边区域，图片的宽度会被拉伸至填满<image>元素。
• bottomRight：不缩放图片，只显示图片的右下边区域，图片的宽度会被拉伸至填满<image>元素。

使用示例：

<image src="{{imageSrc}}" mode="aspectFit"></image>

aspectFill详解

aspectFill: 保持纵横比缩放图片，使图片的短边能完全显示出来，长边按比例缩放，显示在<image>元素的中间。

aspectFill用得比较多，多适合居中剪裁

aspectFill效果展示

原图：