微信小程序image图片标签(超详细)

推荐图床:

image{
          
     width: 300px;  height: 300px;}//设置图片宽高

注意:将图片上传到图床后得到一系列图片链接,此时应该选择链接扩展名为jpg或者png的才有效

1.scaleToFill标签: 默认值,不保持纵横比缩放图片,使图片的宽高完全拉伸至填充满image元素

<image mode="scaleToFill"  src="https://s3.ax1x.com/2021/03/07/6KVmfU.jpg" />

效果:

2.aspectFit标签: 保持纵横比缩放图片,使图片的长边能完全显示出来

<image mode="aspectFit"  src="https://s3.ax1x.com/2021/03/07/6KVmfU.jpg" />

效果: 3.aspectFillt标签: 保持纵横比缩放图片,只保证图片的短边能完全显示出来

<image mode="aspectFill"  src="https://s3.ax1x.com/2021/03/07/6KVmfU.jpg" />

效果:

3.widthFix标签: 设置的宽度不变,高度随原图片宽高比例改变

<image mode="widthFix"  src="https://s3.ax1x.com/2021/03/07/6KVmfU.jpg" />

效果:

经验分享 程序员 微信小程序 职场和发展