收藏
回答

小程序 image 组件样式不支持设置 width: auto,

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug image 客户端 7.0.1 1.9.94

- 当前 Bug 的表现(可附上截图)


wxss 不能设置图片宽高自动 width: auto, 其中 width,height 一个设置 auto 就会造成图片不显示,因为很多情况下我们只会设置图片的高度一样,让宽度自动缩放,但是不能设置 auto 属性


- 预期表现


image 组件能够支持 wxss 设置 width,height 的属性值为 auto


- 复现路径



- 提供一个最简复现 Demo\


<image style="width: 54rpx; auto;margin-left: 20rpx; margin-right: 20rpx" src='

http://58.68.234.140:6677/pemicon/1539673680890.png

'></image>


最后一次编辑于  2018-12-28  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

3 个回答

  • ᶘ ᵒᴥᵒᶅ Winner、
    ᶘ ᵒᴥᵒᶅ Winner、
    2018-12-28

    https://developers.weixin.qq.com/miniprogram/dev/component/image.html

    image组件的 mode属性了解一下。

    2018-12-28
    赞同 1
    回复 1
    • Brave
      Brave
      2018-12-28

      我想实现的是 height: 30rpx; width: auto 这种固定高度,宽度自动,但是它不支持设置 auto, 设置 auto ,width 直接变成 0 了

      2018-12-28
      1
      回复
  • Stephen
    Stephen
    2018-12-28

    mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。

    模式说明
    缩放scaleToFill不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
    缩放aspectFit保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
    缩放aspectFill保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
    缩放widthFix宽度不变,高度自动变化,保持原图宽高比不变
    裁剪top不缩放图片,只显示图片的顶部区域
    裁剪bottom不缩放图片,只显示图片的底部区域
    裁剪center不缩放图片,只显示图片的中间区域
    裁剪left不缩放图片,只显示图片的左边区域
    裁剪right不缩放图片,只显示图片的右边区域
    裁剪top left不缩放图片,只显示图片的左上边区域
    裁剪top right不缩放图片,只显示图片的右上边区域
    裁剪bottom left不缩放图片,只显示图片的左下边区域
    裁剪bottom right不缩放图片,只显示图片的右下边区域


    2018-12-28
    赞同 1
    回复 1
    • Brave
      Brave
      2018-12-28

       这个不能用,就是他不支持设置 width 为 auto 这个属性值,我只设置一个高度, width: 30rpx; height : auto 在小程序不行,图片直接不显示, height 他就显示为 0 了

      2018-12-28
      1
      回复
  • h.jamie
    h.jamie
    02-20

    顶!希望官方给个回复 @官方

    width: 100rpx;
    height: auto;

    我也遇到相同问题,height: auto; 也会导致图片不显示。

    02-20
    赞同
    回复 1
    • Brave
      Brave
      02-28

      就是啊,没办法哦

      02-28
      回复