鸿蒙arkTS 让一个图片相对于父盒子居中

鸿蒙 ArkTS (一种基于 TypeScript 的框架) 中，如果你想让图片在一个父容器内居中显示，你可以通过 CSS 或者布局组件的方式来实现。这里提供一个简单的 CSS 方案：

.parent-box {
  position: relative; /* 父元素需要定位 */
  display: flex; /* 如果是 Flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

img {
  max-width: 100%; /* 图片宽度自适应 */
  height: auto; /* 高度自动计算，保持宽高比 */
}

如果你使用的是 ArkTS 提供的视图组件，可能需要设置组件属性或者使用 Layout 组件配合 Align 和 Flex 属性来达到同样的效果。

import { View } from '@huaweicloud/huaweicloud-ui-arkts';

const ImageContainer = () => (
  <View style={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
    <Image src="your-image-url" style={{ maxWidth: '100%', maxHeight: 'auto' }} />
  </View>
);