公告列表
公告列表
收藏
回答

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

框架类型 问题类型 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>


回答关注问题邀请回答
收藏

6 个回答

  • 2018-12-28

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

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

    2018-12-28
    有用 2
    回复 1
    • Mamba
      Mamba
      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
    回复 3
    • Mamba
      Mamba
      2018-12-28

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

      2018-12-28
      赞 1
      回复
    • 胖西瓜琳
      胖西瓜琳
      2020-07-15
      再加上2.10.3支持的mode="heightFix"就可以了
      2020-07-15
      赞
      回复
    • 回头風
      回头風
      2024-01-15回复胖西瓜琳
      24年，依然不支持auto属性值，heightFix能缩放，但它是按长边缩放，短边裁剪。一些情况会显示得很离谱
      2024-01-15
      赞
      回复
  • momo
    momo
    2024-02-04

    解决了吗

    2024-02-04
    有用
    回复
  • 星星也会数人类嘛
    星星也会数人类嘛
    2023-06-14

    可以获取图片的实际高度要是超出最大，就显示为最大高度，宽度不设置自适应

    示例

    https://www.jb51.net/article/106605.htm

    2023-06-14
    有用
    回复
  • KongHuaWei
    KongHuaWei
    2020-06-05
    可以设置 width: 100%;
然后用 margin-left margin-right 调


    2020-06-05
    有用
    回复
  • h.jamie
    h.jamie
    2019-02-20

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

    width: 100rpx;
    height: auto;

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

    2019-02-20
    有用
    回复 2
    • Mamba
      Mamba
      2019-02-28

      就是啊,没办法哦

      2019-02-28
      赞
      回复
    • solar
      solar
      2020-05-18
      max-width: 100rpx;
      mode="widthFix"
      2020-05-18
      赞
      回复
请 登录 后发表内容
相关问题
相关文档