CODEWITHSUNDEEP
react-native
Avery235
Avery235

Reputation: 5326

React Native Aspect fit image

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

Upvotes: 4

Views: 7600

Answers (2)

Dhaval Panchani
Dhaval Panchani

Reputation: 405

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

Upvotes: 0

Mike_NotGuilty
Mike_NotGuilty

Reputation: 2405

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.

Upvotes: 14

Related Questions