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

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

前言:
因为微信小程序静态打包的图片大小不可超过2m,故应该采取将需要用到的图片上传到网络,通过其链接来操作图片

推荐图床:
路过图床

image{ width: 300px; height: 300px;}//设置图片宽高
1
注意:将图片上传到图床后得到一系列图片链接,此时应该选择链接扩展名为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" />
效果:

 

原文链接:https://blog.csdn.net/qq_49438920/article/details/114481058

posted @ 2023-01-12 16:28  imxiangzi  阅读(1318)  评论(0编辑  收藏  举报