Trying to align with autolayout

Question

I have this view hierarchy on a viewController

view
 | |_____ redView
 |            |______orangeView
 |
 |
 |_______ blackView

blackView height is always 126 pt. orangeView has a 127:155 aspect ratio and is inside redView . The result is this seen on iPhone 3.5".

Now I would like to make this scale proportionally to all iPhone sizes. Doing it on Photoshop, I would like it to be like this:

Notice two things: orangeView should keep its aspect ratio and the iPhone 4 is the only one where the organgeView height is the same as redView 's. On the other phones, what is the same is the width.

Because of this, I cannot figure out what constrains I should apply to orangeView to make it scale like I want.

What I am obtaining is this:

The constrains I have so far for orangeView are these: centerX to redView, centerY to redView, aspecratio (127:155) and same height of redView, but this last is incorrect and the reason why I am having the result I have. How can I make orange view expand to reach the maximum horizontally or vertically, keeping its aspect ratio, on all devices and continue to be completely within redView area?

Answer 1

I think you can do what you want by setting the width and height of the orange view equal to the red view, but with low priority (I used 250). Also you need one that says the orange view is <= the width of the red view with a priority of 1000 (otherwise the orange view extends past the red view's bounds in the width direction).

So, the ones that say equal width and equal height to superview both have a priority of 250.