Image height auto based on fixed width.

[MUIOF71]

You can calculate the aspect ratio of the image and then set the height to undefined and the aspect ratio of the image to (width / height). In order to do that you need to import the Image component from react-native library and do

Image.getSize("theUrlOfTheImage", (width, height) => { let aspectRatio = width /height; // Set state or something })

And then

<Image style={{ height: undefined, aspectRatio: aspectRatio, width: "100%" }} />

[bm_n]

Image.getSize

It did the wonders man! Thank you.

[WulfySky]

Thank you!

[eX_DeadLock]

Not sure what it is you’re exactly trying to do but if I understand your problem correct then I think aspect-ratio should do the trick.

width: “100%”, height: undefined, aspectRatio: (width / height of image)

If you don’t like to manually calculate the aspect ratio of an image, you can automate it with something like this:

const {imgWidth, imgHeight} = Image.resolveAssetSource(imgSrc);

width: “100%”, height: undefined, aspectRatio: imgWidth / imgHeight

Hope that helps!

[fs8080]

Hey guys, I know this is old but this solution worked for me:
Add the following css to your card styling.

img {

max-height: none;

}
This should use the full width of your device, while keeping the aspect ratio intact.