0

My app is forced to Portrait mode. I am using landscape images as clickable buttons in various locations. But I am having a hard time figuring out the best width/height ratio for the images so that no matter the smartphone screen size the image will retain a good ratio.

I need the images wide enough so that it will fill the full width of the screen but also with proper ratio that if it needs to shrink to fit the screen width that the height will adjust proportionately.

I have been toying with 480 x 120 (4 to 1 ratio) but I am noticing on screens of 360 width the image height should be 90 but the height is actually coming out as 82 - cause the image to be skewed. Also, on some devices like iPads, 480 isn't wide enough so I am forcing the image to width:100% of the container div and then that skews the image as well.

I have done reading on this in multiple places but there seems to be no consensus or best practice that I can find.

rolinger
  • 2,787
  • 1
  • 31
  • 53
  • 1
    This might help: https://stackoverflow.com/a/10441480/1242317 Just add the image inside the `div` and add `max-width:100%` to it and `width:100%` to the image – Thomas Feb 21 '20 at 18:21
  • @Thomas That does help. For landscpe images I figure the aspect ratio for 4:1 the padding is 25% Knowing this, I should probably force my images to 960x240 and then this ratio could work for iPads on down to smaller/older smartphones. Gonna give this a short. Thanks! – rolinger Feb 21 '20 at 18:40

0 Answers0