Objective C: How to fix aspect ratio of image (and not change to fit imageview frame)

Question

I am using the UIImagePickerController to select images for my app. However I am facing some challenges with regards to maintaining aspect ratio of the selected images

For example,

I have a raw image on the phone as follows (not square image):

enter image description here

After selecting the image on iphone via the 'move and scale' page to crop image, the result is as follows: (aspect ratio is still maintained here)

enter image description here

My app will display the selected image in a UIImageView with a square frame (200 x 200). After setting the selected image to the UIImageView (UIImageView.image = selectedImage), the image's aspect ratio is not maintained but instead followed the frame of the UIImageView: (The image looks skewed now in my UIImageView):

enter image description here

Is there any way to maintain the aspect ratio of the image in this case?

EDIT: Update expected result

After some thinking, I realize that the best way to resolve my issue is to ensure that for such images (non square), I need to 'convert' them into square images i.e. fill the empty spaces on top and bottom of images to make a square e.g.

Expected image: (with the top and bottom borders added)

enter image description here

EDIT: Update with sample code

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingImage:(UIImage *)img editingInfo:(NSDictionary *)editInfo 
{

    self.imageView.contentMode = UIViewContentModeScaleAspectFill;

    self.imageView.image = image;
    [[picker parentViewController] dismissModalViewControllerAnimated:YES];

    //Compress image
    UIImage *image = [self scaleImage:img toSize:CGSizeMake(612.0,612.0)];

    self.imageData = UIImageJPEGRepresentation(image, 0.75);
}

By adding the code "self.imageView.contentMode = UIViewContentModeScaleAspectFill;", I was able to obtain the square image in the uiimageview

enter image description here

But it seems like the original image was still not a square image, hence the skewing problem will still occur when I do "UIImage *image = [self scaleImage:img toSize:CGSizeMake(612.0,612.0)];". Is my assumption correct? Anyway to mitigate this issue as I will still need to display the 'compressed' image elsewhere in the app.

@edo42, thanks a million for pointing me to the post, it's exactly what I needed. Can you post your comment as an answer so that I can accept it. Thanks again — Zhen, Jul 13 '11 at 14:03
Try to read this other answer: http://stackoverflow.com/questions/1703100/resize-uiimage-with-aspect-ratio — albianto, Jul 14 '11 at 07:20

score 37 · Accepted Answer · edited May 23 '17 at 12:31

37

Doing myImageView.contentMode = UIViewContentModeScaleAspectFit; isn't enough because it changes the aspect ratio of the image in the way Zhen wants, but it doesn't change the source image, which is what Zhen needs. The only way to do that is to use the UIGraphicsImageContext as explained there: Resize UIImage with aspect ratio?

edited May 23 '17 at 12:31

Community

1
1

answered Jul 14 '11 at 07:25

albianto

4,092
2
36
54

score 23 · Answer 2 · answered Jul 13 '11 at 05:46

23

You should adjust your UIImageView's content mode:

myImageView.contentMode = UIViewContentModeScaleAspectFit;

Just for the kicks - check documentation on UIViewContentMode constants.

answered Jul 13 '11 at 05:46

Eimantas

48,927
17
132
168

this is now `myImageView.contentMode = UIView.ContentMode.scaleAspectFit` – Mr Heelis Mar 19 '19 at 13:17

score 7 · Answer 3 · answered Jul 13 '11 at 05:47

7

You can set the contentMode property on your UIImageView instance, like:

myImageView.contentMode = UIViewContentModeScaleAspectFit;

This will force it to preserve your image's aspect-ratio when scaling. There are also a number of other values you can set here to produce other behaviors, as described in the reference documentation.

answered Jul 13 '11 at 05:47

aroth

54,026
20
135
176

thanks for your response. However, I am still unable to get preserve the aspect ratio of the image. Is there any way to fill up the top and bottom spaces of the image to make it into a square image in the first place? – Zhen Jul 13 '11 at 06:09
@Zhen - then use UIViewContentModeScaleAspectFill content mode; – Eimantas Jul 13 '11 at 06:16
@Eimantas, I need to change the original image as well so that it becomes a square by adding additional borders if required. The AspectFill method seems to be only affecting the display but doesn't modify the image itself. Any suggestions? Thanks! – Zhen Jul 13 '11 at 06:28
@Zhen - There is, but it's not easy or efficient. You'd need to create your own graphics context and draw your image into it in the appropriate position. But I'm confused as to why `contentMode` does not work for you. Can you post some sample code? – aroth Jul 13 '11 at 06:31
@aroth, the contentMode works. The complication comes when I need to compress the photo (see my sample code). I am assuming the photo is always a square which will still pose an issue as I believe the contentMode method does not change the original image's dimension? – Zhen Jul 13 '11 at 06:53

Objective C: How to fix aspect ratio of image (and not change to fit imageview frame)

3 Answers3

Linked