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

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

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

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

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

设置宽度100%,

.img{width: 100%}

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

1. image组件默认宽度300px、高度225px  ;

2.css设置宽高(尺寸最好为rpx,更适应屏幕)

3.mode 设置缩放模式(13种)

样式设置宽度100%   添加属性 mode="widthFix"

4.套在div种,设置div宽高,


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/11968078.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存