iOS keep aspect ratio of UIImageView but fill width

Question

This is my first app from scratch under iOS 8 and XCode 6, so these spacing issues have been killing me. In the below you can see I have an UIImageView that I want to be a square, but I want it to stretch across the width of the screen as well.It has a width and height value so when the app runs the screen is wider so it ends up a tiny box in the top left corner. I've tried messing around with the constraints in every way I could think of, but when I constrain it the image blows up to full size and covers everything going off the screen. How do I get it to stretch and keep the 1 to 1 aspect ratio?

EDIT Ok, I was wrong. It's not the UIImageView that's not adjusting, it's the entire view.

Solution 1

Constrain both sides and top to superview. You can also say that, for example, width/height can be >= 320, which sometimes helps. But remember, it will only work in portrait, when you turn the UI to landscape, the image can never stay square while filling the width and being fully onscreen at the same time.

EDIT: the image should not try to stretch beyond screen bounds (in portrait) as long as you do not tell it that it should be "this far from the bottom"

EDIT - 2: Set the background view constraints to superview. all 4.

Solution 2

Use the image view content mode:

[self.imageView setContentMode:UIViewContentModeScaleAspectFill];

---

It seems like you also want the width of the frame to fill the screen. Use these constraints:

• Distance to top, left, and right to 0.
• Height equals to width constraint.
• Image ratio 1:1 constraint.

Then the image view should be resized appropriately.

Solution 3

I would set the frame programmatically and not use constraints at all. To do that

1. Link the ImageView to an outlet in its View Controller

2. Set the frame so the two values are equal

   frame.size.width/frame.size.height

Comments

[Suspe18]

Doesn't that just affect the image in the view rather than the view itself?

[Suspe18]

This I think should have worked. I updated my question with more details. It's the whole view that's not adjusting, not just the image.

[Suspe18]

I updated my question with more details. It's the whole view that's not adjusting, not just the image.

[Suspe18]

I updated my question with more details. It's the whole view that's not adjusting, not just the image.

[Enrico Susatyo]

@Jhorra I updated my answer, hope this works for you.

[Skoua]

To achieve a 1:1 ratio constraint : [self.yourview addConstraint:[NSLayoutConstraint constraintWithItem:self.yourview attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.yourview attribute:NSLayoutAttributeWidth multiplier:(self.yourview.frame.size.height / self.yourview.frame.size.width) constant:0]];