- 需求的场景描述(希望解决的问题)
image组件目前必须要显式地定义宽高才能显示,无法根据图片尺寸自动决定组件宽高。
就是说,当我取得的图片尺寸是不固定的时候(比如聊天双方发送的图片),我无法控制image组件的尺寸随着图片尺寸自动变化。而只能在一个固定大小的image框中,来决定我要让这张图片左右留白还是上下留白(在等比例缩放且显示全图的前提下)。
- 希望提供的能力
希望image组件的能尺寸随着图片尺寸自动变化。
类似于web端的"width/height:auto",比如图片本身的尺寸是100px*300px,允许设定image组件的style=“width:200px;height:auto”,使得整个image组件的宽高是200*600。
你可能会建议我使用mode=“aspectFit”,但是这个属性设置后只能使得图片“看起来被缩放了”,整个image组件依然是固定设置的大小。
微信小程序不支持object-fix:cover属性么,,设置后无效果??需要宽高固定,图片自适应铺满容器。
确实没有object-fix:cover,试试aspectfill吧
https://developers.weixin.qq.com/miniprogram/dev/component/image.html?search-key=aspectfill
了解下image组件的介绍
谢谢,已经解决问题。可以用aspectfill(昨天我用过,但是没变成自己想要的效果,很奇怪,今天再用这个属性又可以了,最近刚接触小程序,这些东西得慢慢踩了)
图片高度固定,宽度根据图片宽高比撑开,设置如下:设置固定height,mode: heightFix,不设置width, 即可,反之还有widthFix。
哦,早上再试了下确实可以。这个属性是自动执行了小程序框架的js,渲染时把height改成图片缩放后的高度了,与自己用js控制有些类似。之前一直在渲染出来后尝试更改样式中的width和height来测试其有效性,所以误以为无效了。
谢谢你的耐心解答.@卢霄霄
在css里加上max-height: 100%;max-width: 100%;
这个方法你试过吗?我试了下不行诶,图片直接不显示了。
标签里加 mode='aspectFit'
wxss里给图片定义宽高max-height: 100%;max-width: 100%;
getImageInfo 去获取了,再设上去呗。。虽然有点麻烦
是有点麻烦,看ui要求严不严吧,严格要求的话就只能用js了
如果你的需求是宽度固定,高度自适应的话,不是刚好是 widthFix 吗
widthFix这个属性值,我在开发工具2.3.0版本上试了下,完全没用的啊。设置的效果跟没设置一样的
设固定宽度,配合widthFix呀~ 肯定有用,我瀑布图在用