微信小程序中关于图片的适应


在小程序中的标签是有默认的高度的(240px);这个情况在有的时候会比较尴尬。

在正常的pc或者手机端开发时,图片一般都设置为:width:100%;然后让高度自适应,保持图片的宽高比。在小程序中如何实现呢?

如果你要是给图片设置:height:auto;的话  那么恭喜你,图片高度直接为0了;是不是很nice?

解决办法:

1.首先你需要给图片设置宽度:100%;然后使用微信内置的mode属性(常用的值:scaleToFill,aspectFit,aspectFill,widthFix),这个4个属性都试试,总会有你想要的效果。

2.第二种办法比较耿直,你直接给图片个min-height;

结语:现在也在小程序的深入学习阶段,image这种有默认宽高的元素在微信小程序中并不少见,比如说常用的swiper,而且swiper有内置的overflow:hidden;有时候就会出现显示不全的情况,这种时候就需要你手动的对其进行样式的调整。

over