[FIXED] How to know the image dimensions in pixels to fit all screens

Issue

I'm working on a react native application in a company and my manager asked me what is the best image size in pexels to upload from API (dashboard) to fit the View in the application ?

And I'm using percentage units not numbers: (width: '80%', height: '50%') I don't know what is the best sized of images to fit or the aspect ratio of the image and react native is unitless!

What should we add 'Hint' for the client in the dashboard when he upload any image ? Or how could I know the best image dimensions to fit all screens ?

Solution

In our organisation, we usually follow the following convensions to make an image fully responsive.

1. Get the dimentions of the image using: const {width, height} = Image.resolveAssetSource('path-to-your-image');
2. Get the ratio factor of width and height by using: const ratioFactor = height/width;
3. Whenever you set the width of your screen by 'n' digit, set the height to 'n*ratioFactor'
4. In this ways the image can never be stretched or compressed. It will be fully responsive according to it's dimensions.
5. Preferably use image with standard dimentions as 1024 x 768 pixels.

Answered By - STBox

Answer Checked By - Willingham (PHPFixing Volunteer)