Auto Layout keeps stretching UIImageView

Question

I am using Auto layout and it's driving me crazy. I have done everything I could to prevent UIImageView from stretching all over. I have no idea why it does that. I tried using constraints, solving auto layout issues. For now, the only solution was turning the auto layout itself.

Could anyone please tell me why xcode is completely ignoring my constraints? I would expect the UIImage to stay as 320x320 when I explicitly set it as that, but noooooooo....

I want to post images, but the site won't let me, and I would like to add code to this question so that it is more specific, but there's literally no code at all. I just dragged "UIImageView" from storyboard, made it small, set constraints as is, and it's just ignoring my code.

Solution 1

You'll want to make sure your UIImageView is set to clip to bounds. If not, the image will spill out of the view and will appear to not stretch correctly (even though in reality it is).

In interface builder, make sure the Clip Subviews box is checked.

If you're not using interface builder, the following code will do the same thing:

yourImageView.clipsToBounds = YES;

Solution 2

With autolayout, the values in the Size Inspector are pretty much ignored.

You might expect that if a number is typed into the boxes on the Size Inspector, Xcode would automatically create constraints to reflect what you typed, but it doesn't. You need to create "Pin" constraints on your own for the height and width of your UIImageView.

• Select the image view on your storyboard

• Click the "Pin" button at the bottom-right of the storyboard screen

• Type the desired size into the "Width" and "Height" fields, and make sure the boxes are checked

• Click the "Add 2 constraints" button

  

When you are done, you should be able to see your constraints in the Size Inspector on the right side of the screen (the purple boxes)

Solution 3

My problem was with the ContentHuggingPriority and ContentCompressionResistancePriority.

The first controls how important it is to keep the view "hugging" the image (staying close to it and not expanding) and the latter controls how resistant to compression the view is.

We use PureLayout, so the code to fix it was:

[NSLayoutConstraint autoSetPriority:ALLayoutPriorityRequired forConstraints:^{
    [myImageView autoSetContentCompressionResistancePriorityForAxis:ALAxisHorizontal];
    [myImageView autoSetContentHuggingPriorityForAxis:ALAxisHorizontal];
}];

(my problem was only in the horizontal axis)

May 15, 2016: Updated to PureLayout v3 syntax. If you use a version <= 2 just put UIView instead of NSLayoutConstraint. Thanks Rudolf J!

Solution 4

I had the same problem. I added a UIImageView into a prototype cell and wanted to align it next to the text but it kept stretching the image when I applied the constraints. In my case, I changed the 'Mode' property for the Image View to 'Aspect Fit' and it worked fine.

View more solutions

Comments

[Gyuhyeon Lee]

Thanks for the answer, I tried it, but it still gets really really big. Is UIImageView an actual view, like a window, or just a temporary thing that can be overridden by anything? That is, if I put a 320x320 image in a 240x240 imageview, would it get bigger?

[Gyuhyeon Lee]

Thank you for your answer, I had done all of that. As it turns out, the imageview wasn't being stretched, the image imported into the view was clipping outside the view. Common sense would suggest that contents inside would normally stay in the view by default, but I guess not. The problem was solved by checking "clip subviews". Amateur mistake, that's for sure.

[GeneralMike]

@GyuhyeonLee: If you're just starting with iOS programming, don't assume anything happens by default - in my experience it almost never behaves the way I was assuming it would. Glad you found the solution though!

[Ilya Dmitriev]

You can try use: [yourImageView setContentMode:UIViewContentModeCenter]; More info about UIViewContentMode

[DrMickeyLauer]

While this works, I still think there's a bug somewhere – at least in the documentation, if not in UIImageView itself. Isn't clipsToBounds documented as clipping 'subviews'? Since when is the image in a UIImageView considered a subview?

[Travis]

In the documentation they do call it a "view based container" - with container being the word that gives them some shaky ground to stand on. At any rate, UIKit documentation is nothing if not flaky and inconsistent.

[edzio27]

Man, you save my life! Thanks!

[Artem Zaytsev]

Fooh... I was about sending a letter to Hogwarts headmaster for such kind of magic in UIImageView behavior, but you saved my day. The solution is simple and brilliant. Thanks!

[batman]

Had exactly the same issue. Resolved it with Aspect Fit content mode. Still no clue why it doesn't behave correctly.

[A. Vin]

Honestly, I've never been happier to read an answer on SO. You are a certifiable hero sir. I was on the verge of throwing my computer out a window.

[Rudolf J]

This is a good solution. PureLayout has now changed it to [NSLayoutConstraint autoSetPriority.... however...

[Womble]

I stumbled across the clipToBounds "solution" just now, and came here to check if I was losing my mind. This is a terrible API, even by UIKit standards.