react本地绝对定位使图像裁剪

wnvonmuf  于 6个月前  发布在  React
关注(0)|答案(2)|浏览(49)

我有一个问题,将我的图像放置在容器中,那就是当我给予图像position: absolutetop属性时,图像从顶部被裁剪,这是问题:


的数据
下面是我的代码:

<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
  }

字符串
我该怎么弥补?

y3bcpkx1

y3bcpkx11#

尝试在图像样式中使用resizeMode,如

resizeMode:'contain'

字符串

k5ifujac

k5ifujac2#

将resizeMode设置为cover

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

字符串

相关问题