How to fit and resize an Image to View Container?-CodePudding

I'm currently struggling with some image resize in React Native... I have a container that has some Image inside of it but I need the image to resize so it fits completely in the small container (without cropping the image).

This is what I currently have:

container: {
            flex: 1,
            flexDirection: 'row',
            width: width / cardsPerRow,
            marginLeft: customPadding / 2,
            marginRight: selectDeviceType({ Tv: scale(3, 0) }, customPadding / 2),
            marginBottom: selectDeviceType({ Tv: scale(15, 0) }, scale(20)),
            marginTop: selectDeviceType({ Tv: 0 }, 0),
            shadowOffset: { width: 0, height: 2 },
            shadowColor: '#000',
            shadowOpacity: 0.15,
            shadowRadius: 1,
            elevation: 0,
            borderRadius: selectDeviceType({ Tv: 0 }, cardRadius),
            
        },
        wrapperStyle: {
            height: selectDeviceType({ Handset: scale(77) }, scale(85)),
            width: selectDeviceType({ Handset: scale(134) }, scale(165)),
            aspectRatio:  AspectRatio._16by9,
            borderRadius: selectDeviceType({ Tv: 0 }, cardRadius),
            overflow: 'hidden',
            resizeMode: 'contain',
            backgroundColor: 'red'
        },
        imageStyle: {
            aspectRatio: AspectRatio._16by9,
            width: "100%",
            height: '100%',
            flex: 1,
            resizeMode: 'contain',
        },

Container Class is the whole card section, and wrapperStyle is the image container... So as you may see the image is not resizing to fix the wrapperstyle property, instead of sizing automatically to wrapperStyle, the image just crops out. Any idea on how to fix this?

CodePudding user response：

please try this, may be helps you

\ add resizeMode

  <Image
    style={styles.imageStyle}
    source={{uri:imageUrl}}
    resizeMode='contain'
   />