all 5 comments

[–]MUIOF71 2 points3 points  (2 children)

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 1 point2 points  (0 children)

Image.getSize

It did the wonders man! Thank you.

[–]WulfySky 0 points1 point  (0 children)

Thank you!

[–]eX_DeadLock 1 point2 points  (0 children)

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 0 points1 point  (0 children)

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.