Question

当我有背景图片时：

<Image style={{flex: 1, width: null, height: null, resizeMode: 'cover'}} source={require('../images/background.png')}>
    <!-- Children -->
</Image>

我希望我的图像覆盖整个屏幕，同时保持图像的宽高比。（见SO question为什么我使用width: null, height: null。）

但是，如果图像宽度远小于高度，则图像居中会裁剪顶部。

问题：如何让图片从顶部开始，就像网页上的background-position: 50% 0一样？

Answer 1

嘿:)尝试增加父容器的高度，即：。

样式：

export default StyleSheet.create({
  image: {
    flex: 1,
    height: null,
    width: null,
  },
  imageContainer: {
    bottom: 0,
    flex: 1,
    height: '130%',
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
    width: '100%',
  },
})

组件：

<View style={styles.imageContainer}>
        <Image
          resizeMode="cover"
          source={require('src/assets/images/background.jpg')}
          style={styles.image}
        />
      </View>

使用此解决方案，您可以稍微操控您的图像。

设置背景图像位置（即web中的`background-position-x`和`background-position-y`）

1 个答案: