How to stop an image from stretching within a UIImageView?

Question

I have a UIImageView where I have set the frame size to x = 0, y = 0, width = 404, height = 712. In my project, I need to change the image in UIImageView dynamically.

I am using this code to change the image:

self.imageView.image = [UIImage imageNamed:@"setting-image.png"];

The problem is, when the *.png image size is smaller than the UIImageView frame size, the image stretches. I don't want it to stretch. Is there any way to do that?

score 142 · Accepted Answer · edited May 18 '19 at 06:27

142

You can use

self.imageView.contentMode = UIViewContentModeScaleAspectFit;

Swift 3:

imageView.contentMode = .scaleAspectFit

Or UIViewContentModeCenter / .center, or any of the other modes described in the UIView documentation.

edited May 18 '19 at 06:27

Cœur

37,241
25
195
267

answered Aug 12 '11 at 04:19

jtbandes

115,675
35
233
266

thank you for your answer, but using mode aspect fit make some image's position too below, so i change it into top left mode, thank you for suggesting me to using it, finally, i've got the answer :) – R. Dewi Aug 12 '11 at 04:53

score 12 · Answer 2 · answered Nov 21 '14 at 15:49

12

Setting clipsToBounds in combination with UIViewContentModeScaleAspectFit contentMode was what did the trick for me. Hope that helps someone!

imageView.clipsToBounds = YES;
imageView.contentMode = UIViewContentModeScaleAspectFit;

answered Nov 21 '14 at 15:49

Tyler Kidd

121
1
4

"clipsToBounds" checkmarked & "contentMode" as "AspectFill" on the Storyboard worked for me in Xcode 8 – Achintya Ashok Sep 23 '17 at 17:07

score 6 · Answer 3 · edited Aug 12 '11 at 04:21

6

Use the contentMode property. You probably want either UIViewContentModeScaleAspectFit or UIViewContentModeCenter.

edited Aug 12 '11 at 04:21

Srikar Appalaraju

71,928
54
216
264

answered Aug 12 '11 at 04:19

Anomie

92,546
13
126
145

score 4 · Answer 4 · answered Jul 07 '13 at 14:25

4

Change the UIImage's Mode from 'scale to fill' to 'Center' within the interface builder. Make sure your image is the exact size you need.

enter image description here

answered Jul 07 '13 at 14:25

Declan McKenna

4,321
6
54
72

score 4 · Answer 5 · answered Aug 11 '16 at 09:36

You have to set CGSize as your image width and hight so image will not stretch and it will arrange at the middle of imageview.

- (UIImage *)imageWithImage:(UIImage *)image scaledToFillSize:(CGSize)size
{
    CGFloat scale = MAX(size.width/image.size.width, size.height/image.size.height);
    CGFloat width = image.size.width * scale;
    CGFloat height = image.size.height * scale;
    CGRect imageRect = CGRectMake((size.width - width)/2.0f,
                                  (size.height - height)/2.0f,
                                  width,
                                  height);

    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
    [image drawInRect:imageRect];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}

score 3 · Answer 6 · answered Nov 25 '16 at 20:41

3

Update for Swift 3:

imageView.contentMode = .scaleAspectFit

answered Nov 25 '16 at 20:41

transistor

649
6
11

score 2 · Answer 7 · answered Jun 24 '15 at 22:45

2

How to use original size of image - without any stretching

Just change the UIImage's Mode from scale to fill to Aspect Fit within the interface builder.

enter image description here

answered Jun 24 '15 at 22:45

Megaetron

1,154
2
15
29

score 2 · Answer 8 · answered Aug 12 '11 at 04:20

2

Change the contentMode, e.g.:

imageView.contentMode = UIViewContentModeScaleAspectFit;

answered Aug 12 '11 at 04:20

Nathanial Woolls

5,231
24
32

score 1 · Answer 9 · edited May 06 '16 at 13:17

1

Use this for your UIImageView

imageView.contentMode = UIViewContentModeScaleAspectFill;

You won't get any space and with scale preserved. However, some part of the image will be clipped off.

If you use the following:

imageView.contentMode = UIViewContentModeScaleAspectFit;

There will be some empty space, but scale is preserved.

edited May 06 '16 at 13:17

jherran

3,337
8
37
54

answered May 06 '16 at 12:29

Baraiya Bhadresh

41
2

score 0 · Answer 10 · edited Jun 02 '16 at 10:11

still stretch when image is bigger than imageivew

swift

    let qCodeImage = UIImage(named: "qcode-placeholder.png")!      
    let qCodeImageView = UIImageView(frame: CGRectMake(0, 0, CGRectGetWidth(cardView.frame)-30, CGRectGetWidth(cardView.frame)-30))
    qCodeImageView.image = qCodeImage
    qCodeImageView.clipsToBounds = true
    qCodeImageView.contentMode = UIViewContentMode.ScaleToFill
    qCodeImageView.center = cardView.center

How to stop an image from stretching within a UIImageView?

10 Answers10

Linked