实现小程序image图片宽度100%高度自适应

Posted 2023-03-01

参考技术A 因为微信小程序的图片image有默认的宽高：width: 320px和height: 240px，所以只设置宽度100%是无效的，因为图片高度默认240px

只需要添加属性 mode="widthFix"

<image class="img" src="../images/1.png" mode="widthFix">

设置宽度100%，

.imgwidth: 100%;

这样就可以实现图片宽度100%高度自适应，图片不会拉伸

微信小程序 Image 图片实现宽度100%，高度自适应

做法如下：

样式设置宽度100%，

.img{

　　width: 100%;

}

添加属性 mode="widthFix"，

<image class="img" src="../../images/hello.png" mode="widthFix">

即可实现！