Search code examples
iosobjective-cgalleryaspect-ratio

iPhone gallery app crops photo to 3:2 from 4:3 aspect ratio, how?


The photo taken using the UIImagePickerController is of 4:3 aspect ratio. However, the full screen aspect ratio is 3:2. So the gallery app is doing some magic to show the photo as 3:2 aspect ratio. When you zoom out in the full screen view, the photo appears in 4:3 aspect ratio. Can anyone shed light on how it could be done? I've been breaking my head for the past two weeks on this.

Really appreciate the help!!


Solution

  • To fit a 4:3 image into a 3:2 space you can either match the height or match the width.

    If you were to match the height then you'd turn the 3 in 4:3 into the 2 in 3:2. So you'd scale the entire image by 2/3. Since you'd be scaling width and height by the same amount, the effective height after scaling would be the 4 from 4:3 scaled by 2/3, to give 8/3 — a bit less than three. You'd therefore not quite fill the screen.

    Conversely, if you were to match the width then you'd turn the 4 in 4:3 into the 3 in 3:2. So you'd scale the entire image by 3/4. Since you'd be scaling width and height by the same amount, the effective height at the end would be the 3 from 4:3 scaled by 3/4, to give 9/4 — a bit more than two. You'll therefore slightly more than fill the screen.

    So that the photos app does is display pictures with an initial zoom so as to fit the width of the stored image to the width of the display. If the stored image is 3264x2448 (which I think it is on the iPhone 4S and the 5) then on an iPhone 4s — using points rather than pixels — it's scaled by a ratio of 480/3264. If you work that out, it gives the image a final height of very close to 360pt, 40pt wider than the screen.

    In terms of UIKit, that probably means putting a UIImage inside a UIScrollView and setting the initial value of zoomScale to 480/3264 (ie, approximately 0.15). The scroll view can help you with zooming in and out though there's still some manual work to be done — see e.g. this tutorial. By setting a minimumZoomScale of 320/2448 (ie, approximately 0.13) you'll automatically get the behaviour where zooming out as far as you can go ends up showing the entire 4:3 image on screen.