UIImageView image stretched even though contentMode = UIViewContentModeScaleAspectFit

Question

I am really disappointed by the way UIImageView displays the image.

I have following piece of code:

UIImageView *imgview = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 300, 100)];
imgview.image = [UIImage imageNamed:@"img.JPG"];
imgview.backgroundColor = [UIColor greenColor];
imgview.contentMode = UIViewContentModeScaleAspectFit;
[self.view addSubview:imgview];

What I get is a following screenshot:

http://img26.imageshack.us/img26/3686/screenshot20130123at629.png

[image is stretched to full width of UIImageView and does not even take full height]

Original image:

http://img248.imageshack.us/img248/341/screenshot20130123at638.png

possible duplicate of [UIImageView image distorts when big image is placed](http://stackoverflow.com/questions/10653413/uiimageview-image-distorts-when-big-image-is-placed) — tacaswell, Sep 17 '13 at 01:45
I think you have to see This link for image stretched http://stackoverflow.com/a/38892569/3683148 — Kaushik Movaliya, Aug 11 '16 at 09:40

score 35 · Answer 1 · answered Sep 16 '13 at 18:40

35

Setting the size must occur AFTER setting the contentMode

[imageView setContentMode: UIViewContentModeScaleAspectFit];
imageView.frame = CGRectMake(x, y, width, height);

answered Sep 16 '13 at 18:40

Jonathan

6,741
7
52
69

2

This did it for me surprisingly.. Never had this issue before, but this time I was putting the image view in a scrollview, which *might* have something to do with it. – Mike Nov 14 '14 at 21:05
1

It's so silly that you have to put imageView.frame = imageView.frame after changing the content mode :/ – Rambatino Feb 24 '15 at 20:01
1

it worked for me i was stuck in it. Thanx :) i was adding subview to a scrollview and its hight was distorting – Adeel Ahmed Nov 30 '15 at 11:50
What to do if I'm using auto layout instead of frame? And all of them done in storyBoard? – Shamsiddin Saidov Oct 12 '16 at 11:48
This answer is simply not true, the order doesn't matter. I should instead have a close look if maybe the `contentMode` is set twice in the code, or that the image view name is misspelled (so that the contentMode is in fact set on another view in the view controller). – turingtested Sep 01 '17 at 21:11
@turingtested It really is the case, and I'm genuinely baffled... I've been coding iOS for 10 years and never had an issue before but today I was creating a UIImageView, all I did was locally initialize it, set the frame, set the image, then set the content mode, and I had one UIImage that was stretching odd in it (all others worked), I simply changed the order of those only 4 lines of code: init, contentMode, image, frame, and it magically started working. You're right that order _shouldn't_ matter, but it does which means Apple's frameworks have a bug. – Albert Renshaw May 04 '19 at 21:45
@AlbertRenshaw lol hi Albert ;) just realized that its you (tis I, Jonny from facebook) – Jonathan Apr 05 '20 at 00:31

Binarian · Answer 2 · 2014-03-20T11:28:41.487

I had the same problem. In my project a UIImage created with imageWithCIImage: never respected the contentMode of the UIImageView it was inserted into.

Some images do also have weird attributes that causes the same problem. Converting it to PNG with Photoshop always worked on them.

Not working with contentMode:

    CIImage * __strong ciImage = [CIImage imageWithContentsOfURL:url];
    _image = [UIImage imageWithCIImage:ciImage];

The UIImageView seems to resize based on the CGImage.

You need to render the CIImage to a CGImage and can than use that as an UIImage. This will work with UIViewContentModeAspectFit.

Use for example createCGImage:fromRect:, or better use a CGImage from the start.

You should include code to "render the CIImage to a CGImage". That would make this a ver useful answer. — Bjorn Roche, Jan 28 '15 at 18:39

score 1 · Answer 3 · answered Jan 23 '13 at 19:46

1

I just ran it and your code works fine. It could have something to do with you specifying JPG when its actually a png?

You can also use UIViewContentModeScaleAspectFill, but make sure that your bounds are within the view limit because otherwise the outside might be clipped

answered Jan 23 '13 at 19:46

Tommy Devoy

13,441
3
48
75

pictures I attached are Mac screenshots and this is why they are png. – Mike Jan 23 '13 at 22:49
pictures I attached are Mac screenshots and this is why they are png. the original picture i work with is iPhone camera JPG picture. i use UIViewContentModeScaleAspectFit because i want to display whole picture in UIImageView. it works fine when i do it in storyboard but behaves really weird when i create UIImageView in code. – Mike Jan 23 '13 at 22:55
I ran the exact code on an iPhone 5, just in my viewDidLoad and it showed up just fine. It was small and the green part expanded the whole screen, but it wasn't distorted or anything – Tommy Devoy Jan 23 '13 at 23:01
I've just sent the whole project to my friend via e-mail so he can run it and tell me how it looks like. If it looks OK in his Xcode, there is probably something wrong with mine. Otherwise I will post this project somewhere, so somebody can tell what is wrong there. BTW: how can I share this 4MB Xcode project zip file? – Mike Jan 23 '13 at 23:29
You can just make a free gitHub repo – Tommy Devoy Jan 23 '13 at 23:43

score 0 · Answer 4 · answered Nov 08 '14 at 15:37

This is a dumb one, so stupid I'm proud of it. Bottom line is I ended up on this SO post thinking contentMode = UIViewContentModeScaleAspectFit was broken when in fact what was really broken was my expectation of the outcome. I was working with a square image in a square view so Fit and Fill were having the exact same effect. I cried like a baby when I couldn't get it to sit widescreen inside the square.

Jorge Wander Santana Ureña · Answer 5 · 2016-06-20T16:52:00.483

0

In my case, i solved this removing some constraints that resize the imageview that i set by error.

[UPDATE]

It is "Size Constraints" the one that make size relative to another view.

Xamarin IOS Doc

edited Jun 20 '16 at 16:52

answered Jun 17 '16 at 16:31

Jorge Wander Santana Ureña

1,100
1
14
14

I use this solution from Xamarin IOS that work with C#, but the idea is the same, it is about remove **constraints** In case that you are looking for an xcode ios code example try this: i have no tested it but, you can try this: `[imageview.contentView removeConstraints:imageview.contentView.constraints];` @ChrisSteele – Jorge Wander Santana Ureña Jun 17 '16 at 19:07

UIImageView image stretched even though contentMode = UIViewContentModeScaleAspectFit

5 Answers5

Linked