当前端固定好宽高数值,但后台的图片太宽或太高时,只想不破坏清晰度和比例展示一部分,使用 mode="aspectFill"(已经在css中给过宽度和高度)
使用前:
使用后:
<image :src="item.sysAttachments[0].bigUrl" mode="aspectFill"></image>
总之:
aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取,长边会截取,不是完整的图片
aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整展示图片。
widthFix:宽度不变,高度自动变化。