HarmonyOS svg图片尺寸

我现在有个svg图片。

<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> 1.

它这个宽高现在是按40px来展示的，我希望能按40vp来展示应该怎么设置？

这个Image就是固定要 200x 200vp。

HarmonyOS

zbw_apple

2024-10-28 10:19:05

浏览

回答 1

按赞同

按时间

put_get

可以试试Image的objectFit(ImageFit.None)方法。

@Entry  
@Component  
struct Index {  
  @State message: string = 'Hello World';  
  
  build() {  
    Column() {  
      Image($r('app.media.app_icon'))  
        .width(200)  
        .height(150)  
        .border({ width: 1 })  
        .objectFit(ImageFit.Fill)  
        .margin(15)  
          // 不保持宽高比进行放大缩小，使得图片充满显示边界。  
        .overlay('Fill', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })  
      Image($r('app.media.app_icon'))  
        .width(200)  
        .height(150)  
        .border({ width: 1 })  
          // 保持宽高比显示，图片缩小或者保持不变。  
        .objectFit(ImageFit.ScaleDown)  
        .margin(15)  
        .overlay('ScaleDown', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })  
      Image($r('app.media.app_icon'))  
        .width(200)  
        .height(150)  
        .border({ width: 1 })  
          // 保持原有尺寸显示。  
        .objectFit(ImageFit.None)  
        .margin(15)  
        .overlay('None', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })  
    }  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

针对不同的问题场景建议考虑其他布局，现提供以下思路。

Stack(){  
  Image($r('app.media.app_icon')).width(50).height(50)  
  Image($rawfile('konglong.jpg')).width(20).height(20)  
}  
.width(50).height(50)  
.border({  
  width: 1,  
  color: '#333'  
})1.
2.
3.
4.
5.
6.
7.
8.
9.