Lets say I have an app. In that app I have a div which is 50% of the screen height and 100% of the screen width. Lets now say I want to put a picture in the middle of that div so it looks nice so lets say then the top and bottom margins of the picture should be 10% which would make the image 80% of the div’s height (assume this picture is a perfect square). I want to be able to have this picture appear on every device so it looks similar. Obviously now if someone views it on a iphone4 the image will need to be smaller than for a user who views it on an iphone6+.
Lets now say I am grabbing this image from some api like Facebook’s or Google’s where I can specify the size of the image I need. Now say I have 2 users, Bob(iphone4 user) and John(iphone6+ user). How to I determine which size of image I need for both of these users? Is there a formula I can follow?