uni-app image 图片组件不同 mode

代码

默认mode为scaleToFill。

默认宽度320px、高度240px。

<image src="/static/a.jpg" mode="scaleToFill"></image>

常用 mode

• scaleToFill：默认模式。不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素。
• aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
• aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
• widthFix：宽度不变，高度自动变化，保持原图宽高比不变。
• heightFix：高度不变，宽度自动变化，保持原图宽高比不变。

应用场景

scaleToFill：拉伸变形，填满容器。纯色背景图、抽象纹理图。（注意：绝大多数照片、人像、产品图需要保持比例内容，不适合这种模式）

aspectFit：保持比例，完整显示。图片比例和image标签比例不一致时，会留下空白间隙。适合展示图片原貌的场景，如产品展示。

aspectFill：保持比例，裁剪填满。轮播图、Banner图（优先保证视觉饱满，边缘裁剪不影响核心内容）；头像（圆形/方形容器，裁剪边缘可保留人物面部核心区域）。

备注

scaleToFill等同于CSS样式中的object-fit: fill;。

aspectFit等同于CSS样式中的object-fit: contain;。

aspectFill等同于CSS样式中的object-fit: cover;。

官方文档

https://uniapp.dcloud.net.cn/component/image.html