0

First, I'm a UI/UX Designer so be patient with me please :)

I designed a new app. The app will only be viewed in portrait mode. My image area at the top of the page is fixed at 280px tall, but the image will always fill the width of the screen.

What I'm trying to avoid is scaling the image for each size. I want to crop the image instead.

I imagine it working like this: There's an image bounding box that is fixed at 280px tall but set to 100% width. This box has a background image that is set to always be fixed centered and to the top (like you can do with CSS). So on smaller screens, the image is cropped on the left/right. On larger screens, the image shows more detail to the left and right. So the image never scales. Only MORE of the image is shown on larger screens.

My question: what size do I need to create my master image (that will be scaled and reused for all devices) if my image bounding box is fixed @ 280px tall? For iOS and Android.

You can see by the example how the image should look on each screen below.

Example shows iPhone SE, iPhone 7, iPhone 7+ and default Android.

Salvatore
  • 3
  • 2

1 Answers1

0

I assume you are describing in points (and not pixels). If so, it should be 498 points wide by 280 points tall (to have a 16:9 ratio). The widest version is the one for the iPhone 7+. However, to have the @3x version for iPhone 7+, the image would have to be 1493 pixels wide by 840 pixels tall. The rest are smaller, so can scale from that one.

pesch
  • 1,976
  • 2
  • 17
  • 29
  • Yes points. Sorry. So creating a 1493x840 image will give my iOS developers all they need to make this work on the back-end? Any ideas on an Android size? Or are you saying this one size should work for both? Thanks! – Salvatore May 16 '17 at 19:18
  • http://stackoverflow.com/questions/7587854/is-there-a-list-of-screen-resolutions-for-all-android-based-phones-and-tablets – pesch May 16 '17 at 19:21
  • For iOS you should create 3 images: image.png being 498x280, image@2x.png being 996x560 and image@3x.png being 1493x840. For Android you have to create 6 versions: with these respective densities: ldpi (low) ~120dpi mdpi (medium) ~160dpi hdpi (high) ~240dpi xhdpi (extra-high) ~320dpi xxhdpi (extra-extra-high) ~480dpi xxxhdpi (extra-extra-extra-high) ~640dpi – pesch May 16 '17 at 19:27
  • If this is enough, please mark your question as answered :) – pesch May 16 '17 at 19:29
  • Thanks. I need to read this a bit to make sure I grasp it. The idea was for me to not create each size. Only to create one master image for each platform that can be resized on the server side. – Salvatore May 16 '17 at 19:34