响应本机绝对定位使图像裁剪

Question

我在将图像放置在容器中时遇到问题，就是当我给图像position: absolute和top属性图像从顶部裁剪时，这是问题所在：

这是我的代码：

<View style={styles.OurTherapistsContainer}>
          <View style={styles.therapistCard}>
            <View style={styles.imageContainer}>
            <Image style={styles.image} source={require('../assets/img/leong.png')} />
            </View>
          </View>
      </View>

...
therapistCard: {
    width: 150,
    height: 150,
    borderRadius: 25,
    borderWidth: 1,
    borderColor: '#DFEEFF',
    overflow: 'hidden',
  },
  imageContainer: {
    width: 150,
    height: 150,
    backgroundColor: 'red',
  },
  image: {
    width: '100%',
    height: '100%',
    position: "absolute",
    top: 30
  }

我该如何解决？

Answer 1

尝试以类似图像的样式使用resizeMode

resizeMode:'contain'

Answer 2

将resizeMode设置为 cover

<Image style={styles.image} resizeMode="cover" source {require('../assets/img/leong.png')} />