React Native Aspect fit image

user_6599478 0
Viewed 6422
    <Image
      style={{
        alignSelf: 'center',
        flex: 1,
        width: '25%',
        height: null,
        resizeMode: 'cover',
        borderWidth: 1,
        borderRadius: 75,
      }}
      source={{uri:'https://facebook.github.io/react/img/logo_og.png'}}
      resizeMode="stretch"
    />

https://snack.expo.io/rJCoC9S5-

How would i make the image width 25% of the parent, and the height to whatever that is needed to maintain the original width:height aspect ratio?

react-native
2 Answers

You can edit the style of your image like this:

<Image style={style.image} source={require('.....')} />

const style = StyleSheet.create({
  image: {
    height: 80,
    width: 80,
    resizeMode: 'contain'
  }
});

contain is what you are looking for. But there are more options like strech and cover.

user_27108550

Aspect Fill in iOS and Center Crop in Android by these lines of code.

image: { flex: 1, width: null, height: null, resizeMode: 'contain' }

Please have a look this output on three devices

user_65877590
Related