收藏
回答

图片自适应能不能做的完善一点,用起来很无语!

问题模块
API和组件

本来在html里非常简单的图片宽高自适应(设置宽度后,如果不设置高度,默认高度会按比例缩放),到了小程序里面,设置宽度后,如果不设置高度,图片保持原来高度,请问这个有什么意义吗?

当然,小程序的image组件提供了大量的mode模式,但很让人无语的是,这个mode模式必须有一个固定的宽高,也就是必须在一个固定的宽高里展示图片,如果我有一篇文章里的图片宽高都不一样,我需要给每个图片设置相应的宽高,不然就会出现图片和文字之间的间隔不协调!如图所示:

两张图片的高度被默认设置成固定的240px,两张尺寸比例不一样的图片,不管你高度多少,默认都得是一样的,那么对于横图和竖图来说,上下的留白就不一样了,导致文字和图片之间的间距也就不一样了,这就让排版很难看。


当然,有一种很笨的解决方案,就是通过api接口获取图片的宽高,然后动态计算缩放后的高度,再赋值。但这样也太麻烦了,而且尤其对于模板文件来说,还要每个模板传参数,十分繁琐。


这里主要不理解的点是:

1、为什么图片通过style设置宽度以后,高度不是自动同比例缩放呢,保持原有高度有什么意义呢?谁会故意让一张图显示变形?

2、提供的mode模式为什么要固定宽高呢,高度跟随宽度自动缩放变化不行吗?如果需要固定宽高,完全可以在外层view里做设置,image组件自己带固定宽高算怎么回事?


希望这个问题官方解答或者解决一下,谢谢!



最后一次编辑于  2017-06-20
回答关注问题邀请回答
收藏

3 个回答

  • Miller.Lin
    Miller.Lin
    2017-06-21

    mod="widthFix"

    2017-06-21
    赞同 3
    回复 1
    • 不悔
      不悔
      2018-09-10

      兄嘚,我问题描述都没看,直接把你的这代码复制上去就好了。

      2018-09-10
      回复
  • 从小就很酷
    从小就很酷
    2017-06-21

    我他妈的也是这样想的,何必自作聪明去整个高。做个商品介绍谁知道图片有多高啊,搞得我现在都是设置死的 有些都变型了 mmp

    2017-06-21
    赞同 3
    回复
  • 迷惘
    迷惘
    2017-06-21

    因为小程序的图片是用background-image css样式来设置的,跟HTML的image不一样。这个确实是小程序团队做的不够好。

    2017-06-21
    赞同 1
    回复