CODEWITHSUNDEEP
cssimagereact-native
Inaccessible
Inaccessible

Reputation: 1560

Show image in 4:5 ratio and fit inside container view in react native

I am not aware of the image ratio uploaded by user upfront but I need to display all images in 4:5 ratio i.e 

image width=device window width size 
image height=(device window width size)*5/4

I used the above calculation for displaying my image inside container view but the image is cropped. If I use resize mode, the image is distorted.

Code:

<View style={styles.container}>
      <Image style={styles.fixedRatio} source={{ uri: this.props.navigation.state.params.uri }}/>
    </View>

    container: {
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center'
    },
    fixedRatio: {
      marginLeft:-10,
      marginRight:-10,
      backgroundColor: 'red',
      flex: 1,
      aspectRatio: 1,
      width: deviceWidth,
      height: deviceWidth*5/4
    },

Edit 1:

As per @marson answer, I changed the code like below

I set background color to differentiate image. Now the images are not get cropped. But doesn't fit inside the view

<View style={{ backgroundColor: 'blue', aspectRatio:4/5, alignSelf:'center', width: '100%'}}>
   <Image resizeMode={'contain'} style={{width:'100%', height:'100%'}} source={{ uri: this.props.navigation.state.params.uri }}/>
</View>

enter image description here enter image description here

Upvotes: 2

Views: 330

Answers (1)

Marson Mao
Marson Mao

Reputation: 3035

Could this work?

<View style={{
  width: '100%',
  aspectRatio={4.0/5.0}
}}>
  <Image
    style={{
      width: '100%',
      height: '100%',
    }}
    resizeMode={'contain'}
    source={...}/>
</View>

Upvotes: 1

Related Questions