React Native Aspect fit image

Question

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

maybe you can try this solution https://stackoverflow.com/a/42556256/8323264 — Maulana Prambadi, Sep 13 '17 at 06:38
Have a look at [react-native-scalable-image](https://www.npmjs.com/package/react-native-scalable-image) — Ihor Burlachenko, Jan 18 '18 at 14:33
Dup: https://stackoverflow.com/questions/29642685/maintain-aspect-ratio-of-image-with-full-width-in-react-native/49700613 — Param Aggarwal, Apr 06 '18 at 20:34

score 14 · Answer 1 · answered Jul 27 '18 at 14:03

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.

Dhaval Panchani · Answer 2 · 2020-09-17T14:44:31.957

0

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

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

edited Sep 17 '20 at 14:44

answered Jul 22 '20 at 13:13

Dhaval Panchani

329
2
8

this is not keeping the aspect ratio for me – Andy Sep 17 '20 at 09:14
Wow I did not expect this to work at all, but when I used `height: null`, along with set `width` and `aspectRatio` values, it worked perfectly! – instanceof Mar 30 '21 at 10:22

React Native Aspect fit image

2 Answers2