image组件宽高自适应
发布于 6 年前 作者 naqiao 1495 次浏览 来自 问答
  • 需求的场景描述(希望解决的问题)

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

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

  • 希望提供的能力

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

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

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

4 回复

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

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

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

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

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

回到顶部