微信小程序

#微信小程序| 来源: 网络整理| 查看: 265

前言：第一次做小程序的时候使用了image图片组件，src引用一张图片后，给图片的样式设置了width:100%，发现图片变形了~~~，我想要的效果是，图片在父级中的宽是占据父级元素的100%，高度自动适应，按照html中的图片在浏览器中默认显示逻辑应该是，图片宽度为图片的100%宽度像素，高度自适应，所以这种显示逻辑并不会造成图片变形，思虑片刻，猜疑是哪给图片默认设置了图片高度，后来使用调试器选中图片元素查看了下原因，果不其然，小程序给image组件默认设置了以下样式：

image { width: 320px; height: 240px; display: inline-block; overflow: hidden; }

因此导致我只给图片设置了width，但是高度还是使用了默认的240px的值，但是我又不想给图片固定高度，因为固定后，后期如果设计突然要修改图片尺寸的话，还得修改小程序代码样式，然后再发包，这种Low的事情绝不是一个优秀与帅气并存的前端高级开发人员做的事~（啪！谁打的），然后我就去查了下官方API，在image组件上有一个mode属性，这个属性的功能是设置图片裁剪、缩放的模式，默认值为scaleToFill（缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素），mode有很多可选参数，如下：

值说明scaleToFill缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素aspectFit缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。aspectFill缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。widthFix缩放模式，宽度不变，高度自动变化，保持原图宽高比不变heightFix缩放模式，高度不变，宽度自动变化，保持原图宽高比不变top裁剪模式，不缩放图片，只显示图片的顶部区域bottom裁剪模式，不缩放图片，只显示图片的底部区域center裁剪模式，不缩放图片，只显示图片的中间区域left裁剪模式，不缩放图片，只显示图片的左边区域right裁剪模式，不缩放图片，只显示图片的右边区域top left裁剪模式，不缩放图片，只显示图片的左上边区域top right裁剪模式，不缩放图片，只显示图片的右上边区域bottom left裁剪模式，不缩放图片，只显示图片的左下边区域bottom right裁剪模式，不缩放图片，只显示图片的右下边区域

解决方案1：咔咔一顿读和理解，最终确定widthFix缩放模式可以达到朕想要的效果，所以给image添加mode=“widthFix”，效果甚是完美

image{ width: 100%; }

解决方案2： image组件中还有一个bindload属性，该属性的作用是当图片加载完成以后会触发所设置的回调函数，函数有一个event参数，在event中有原图片的width和height值，可以获取到以后再设置给image的style中,代码如下：

打印的event对象属性：在这里插入图片描述 wxml代码：

【本文地址】

公司简介

联系我们