How to know the image dimensions in pixels to fit all screens

Ahmad Jamous

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 ?

STBox

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

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2022-07-3

Comments

0 comments

TOP Ranking

Article

How to know the image dimensions in pixels to fit all screens

How to know the image dimensions in pixels to fit all screens

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

How to import an asset in swift using Bundle.main.path() in a react-native native module

pump.io port in URL

Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext

BigQuery - concatenate ignoring NULL

ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

How to remove the extra space from right in a webview?

java.lang.NullPointerException: Cannot read the array length because "<local3>" is null

Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');

flutter: dropdown item programmatically unselect problem

How to use merge windows unallocated space into Ubuntu using GParted?

Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd

Nuget add packages gives access denied errors

Svchost high CPU from Microsoft.BingWeather app errors

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

12.04.3--- Dconf Editor won't show com>canonical>unity option

Any way to remove trailing whitespace *FOR EDITED* lines in Eclipse [for Java]?

maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

Any way to remove trailing whitespace FOR EDITED lines in Eclipse [for Java]?