收藏
回答

image组件宽高自适应

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 需求 image 工具 0.0.0 2.0.3

- 需求的场景描述(希望解决的问题)

image组件目前必须要显式地定义宽高才能显示,无法根据图片尺寸自动决定组件宽高。

就是说,当我取得的图片尺寸是不固定的时候(比如聊天双方发送的图片),我无法控制image组件的尺寸随着图片尺寸自动变化。而只能在一个固定大小的image框中,来决定我要让这张图片左右留白还是上下留白(在等比例缩放且显示全图的前提下)。


- 希望提供的能力

希望image组件的能尺寸随着图片尺寸自动变化。

类似于web端的"width/height:auto",比如图片本身的尺寸是100px*300px,允许设定image组件的style=“width:200px;height:auto”,使得整个image组件的宽高是200*600。

你可能会建议我使用mode=“aspectFit”,但是这个属性设置后只能使得图片“看起来被缩放了”,整个image组件依然是固定设置的大小。


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

5 个回答

  • 一往无前
    一往无前
    2018-12-11

    微信小程序不支持object-fix:cover属性么,,设置后无效果??需要宽高固定,图片自适应铺满容器。

    2018-12-11
    有用 1
    回复 3
    • 2018-12-12

      确实没有object-fix:cover,试试aspectfill吧

      2018-12-12
      回复
    • 2018-12-12回复

      https://developers.weixin.qq.com/miniprogram/dev/component/image.html?search-key=aspectfill

      了解下image组件的介绍

      2018-12-12
      回复
    • 一往无前
      一往无前
      2018-12-12回复

      谢谢,已经解决问题。可以用aspectfill(昨天我用过,但是没变成自己想要的效果,很奇怪,今天再用这个属性又可以了,最近刚接触小程序,这些东西得慢慢踩了)

      2018-12-12
      回复
  • swordman
    swordman
    2021-08-27

    图片高度固定,宽度根据图片宽高比撑开,设置如下:设置固定height,mode: heightFix,不设置width, 即可,反之还有widthFix。

    2021-08-27
    有用
    回复
  • 2018-10-15

    哦,早上再试了下确实可以。这个属性是自动执行了小程序框架的js,渲染时把height改成图片缩放后的高度了,与自己用js控制有些类似。之前一直在渲染出来后尝试更改样式中的width和height来测试其有效性,所以误以为无效了。

    谢谢你的耐心解答.@卢霄霄


    2018-10-15
    有用
    回复
  • 倍
    2018-10-14

    在css里加上max-height: 100%;max-width: 100%;

    2018-10-14
    有用
    回复 2
    • 2018-10-14

      这个方法你试过吗?我试了下不行诶,图片直接不显示了。

      2018-10-14
      回复
    • 倍
      2018-10-15

      标签里加 mode='aspectFit'

      wxss里给图片定义宽高max-height: 100%;max-width: 100%;

      2018-10-15
      回复
  • 卢霄霄
    卢霄霄
    2018-10-14

    getImageInfo 去获取了,再设上去呗。。虽然有点麻烦

    2018-10-14
    有用
    回复 4
    • 2018-10-14

      是有点麻烦,看ui要求严不严吧,严格要求的话就只能用js了

      2018-10-14
      回复
    • 卢霄霄
      卢霄霄
      2018-10-14回复

      如果你的需求是宽度固定,高度自适应的话,不是刚好是 widthFix 吗

      2018-10-14
      回复
    • 2018-10-14回复卢霄霄

      widthFix这个属性值,我在开发工具2.3.0版本上试了下,完全没用的啊。设置的效果跟没设置一样的

      2018-10-14
      回复
    • 卢霄霄
      卢霄霄
      2018-10-14回复

      设固定宽度,配合widthFix呀~ 肯定有用,我瀑布图在用

      2018-10-14
      回复
登录 后发表内容