HarmonyOS 鸿蒙Next Image组件如何自适应宽高展示图片？

当Image高度设置为200vp时，宽度自适应，但是，如果此时图片的宽度大于窗口的宽度时，也就是大于组件的100%宽度，那么多余的部分会被裁剪掉，我想要的效果是图片在超过时图片不被裁剪掉

bupafengyu 1楼•2 天前

只设定宽度，不设定高度，给个min-width

bupafengyu 2楼•2 天前

您好，搞定了。通过Image中的onComplete获取图片宽高，在通过给定的固定值进行比例换算，最后把得到的值赋值给Image组件的宽高就行了。

sinazl 3楼•2 天前

你好请问你是怎么实现的有源码吗

yuanlaile 4楼•2 天前

你通过Image中的onComplete回调函数获取图片的原始宽高，再通过px2vp()转换成虚拟像素赋值给组件就可以了。

yuanlaile 5楼•2 天前

我可以使用fitOriginalSize，这样图片就会根据像素自动适应。

Image($r('app.media.icon')).fitOriginalSize(true)

songsunli 6楼•2 天前

这个方法没试过，当时考虑的情况图片大小超过窗口大小后，超出的部分不能被裁剪掉。

bupafengyu 7楼•2 天前

在HarmonyOS鸿蒙Next系统中，Image组件自适应宽高展示图片，可通过以下方式实现：

首先，Image组件支持多种图片格式，包括png、jpg、bmp、svg、gif等，且支持从多种数据源加载图片，如本地资源、网络资源等。当Image组件加载图片成功且未设置宽高时，其显示大小会自适应父组件。

其次，要实现Image组件的自适应宽高，需确保父组件的布局约束允许子组件（即Image组件）根据其内容自适应大小。可通过设置父组件的布局参数或样式来实现这一点。

此外，Image组件还提供了多种属性来控制图片的显示方式，如objectFit属性用于设置图片的填充效果，objectRepeat属性用于设置图片的重复样式等。这些属性可以帮助开发者更好地控制图片在组件中的显示效果。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。