How to fit a big image into a fixed container without resizeMode, HELP

I’m facing a problem with Image, need to fit a big image into a 200*300 View, but I want the whole image to fit into my container, I use resizeMode={‘contain’} but it does not seem good.

render() {
    return (
      <View style={styles.container}>
        <Header />

        <View style={{ height: 200, width: 300, backgroundColor: 'red', overflow: 'hidden', borderWidth: 2, borderColor: 'green' }}>
        <Image style={{flex:1,width:null,height:null }} resizeMode={'contain'}  source={{uri: ''}}></Image>


This is the remote image →

If I use resizeMode={'contain'}, it seems to get the expected result but not

If I dont use resizeMode, the image doest not fit into its container

i guess it is because the view is a fixed width and height, the view is the container of the image. if you want the image to fill the container you need to change the size of the view

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.