微信小程序中关于图片image的自适应问题

在微信小程序中的image标签是有默认的高度的(240px);这个情况在有的时候会比较尴尬。 在正常的pc或者手机端开发时,图片一般都设置为:width:100%;然后让高度自适应,保持图片的宽
  在微信小程序中的<image>标签是有默认的高度的(240px);这个情况在有的时候会比较尴尬。在正常的pc或者手机端开发时,图片一般都设置为:width:100%;然后让高度自适应,保持图片的宽高比。在微信小程序中如何实现呢?
 
  如果你要是给图片设置:height:auto;的话 ,那么恭喜你,图片高度直接为0了;是不是很nice?
 
  解决办法:
 
  1.首先你需要给图片设置宽度:width:100%;然后使用微信内置的mode属性(常用的值:scaleToFill(高度会默认240px),aspectFit,aspectFill,widthFix),这个4个属性都试试,总会有你想要的效果。
 
微信小程序中关于图片image的自适应问题
         如:<view><image src="{{info.img}}" class="lipic" background-size="cover" mode="scaleToFill"></image></view>
  2.第二种办法比较耿直,你直接给图片个min-height;(在样式表中直接给图片设置最小高)
 
  结语:现在也在小程序的深入学习阶段,image这种有默认宽高的元素在微信小程序中并不少见,比如说常用的swiper,而且swiper有内置的overflow:hidden;有时候就会出现显示不全的情况,这种时候就需要你手动的对其进行样式的调整。
(责任编辑:admin)
织梦二维码生成器
顶一下
(2)
100%
踩一下
(0)
0%

谢谢您请我吃鸡腿

------分隔线----------------------------
  • 上一篇:没有了
  • 下一篇:没有了
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码:点击我更换图片
最新评论