微信小程序图片显示模式

 

🐋拿破仑曾经说过：“不想当将军的士兵绝不是一个好的士兵”，就好比如不想当架构师的程序员不是一个好的程序员。🌹
🏆所以我的梦想是做一名技术顶尖的架构师，虽然遥不可及，但并不是不可能实现！希望你能关注我，一起见证一个架构师的成长日记吧！✍
💬 如果文章能够对你有所帮助欢迎关注、点赞、收藏一键三连哦！

image 是图片组件(注意,不是 img 哦, 是 image ), 用来展示图片的, 它也是通过 src 属性来指明图片的路
径.

image 组件默认宽度约 300px 、高度约 240px

关于 image 组件, 还有一个属性叫做 mode , 它是用来控制图片的裁剪和缩放形式, 具体的可选值如下：

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

scaleToFill

 

aspectFit

 

aspectFill

 

widthFix

 

heightFix

 

一个小细节

微信小程序中/代表根目录，所以可以省略繁琐的…/…/，直接写一个/就代表回到了整个项目的根目录

from：https://blog.csdn.net/haodian666/article/details/124174029