ios: UIImageView with Aspect Fill not fitting the constraint - ios

Question

I have a following design. Using Storyboard
I have tried multiple methods, but all efforts in vain.
1 - Main Default View of View Controller
2 - View to contain Image view and 2 equal widths buttons
3 - Image view with Aspect Fill (Need to take up as much space based on iPhone size)
Everything I got right except 1 constraint. Constraint between the ImageView and View containing the 2 buttons. (Using Stack view for buttons)
In certain screens sizes, image view with Aspect fill overlaps the stackview.
Aspect Fit leaves lot of white space.
Image View needs to scale for all iPhones based on size ! (That seems to be solved by Aspect Fill, not aspect fit)
How to solve this problem of keeping Image + 2 buttons vertically centered (Rectangle 2 to be vertically and horizontally centered) while ImageView scales ?
Edit: I have tried "Clip to Bound" as well, but it clips the image on the sides. I would like to know the full setup, just what should be done with each of views or how each view should be organized to get the effect ?

Answer 1

maybe your constraints are set up correctly. try to set the "Clip To Bounds" flag for the imageview.
except of that you could add an aspect ratio constraint to your imageview that matches the aspect ratio of the image it contains.
UPDATE
this is how you would set up the constraints programmatically (in viewDidLoad for example):
let containerView: UIView = {
let cv = UIView()
cv.translatesAutoresizingMaskIntoConstraints = false
cv.backgroundColor = UIColor.lightGrayColor()
return cv
}()
let imageView: UIImageView = {
let iv = UIImageView()
iv.translatesAutoresizingMaskIntoConstraints = false
iv.backgroundColor = UIColor.darkGrayColor()
iv.image = UIImage(named: "Forest") // YOUR IMAGE HERE
return iv
}()
let leftButton: UIButton = {
let lb = UIButton(type: .System)
lb.translatesAutoresizingMaskIntoConstraints = false
lb.setTitle("Left Button", forState: .Normal)
return lb
}()
let rightButton: UIButton = {
let rb = UIButton(type: .System)
rb.translatesAutoresizingMaskIntoConstraints = false
rb.setTitle("Right Button", forState: .Normal)
return rb
}()
let stackView: UIStackView = {
let sv = UIStackView()
sv.translatesAutoresizingMaskIntoConstraints = false
sv.axis = .Horizontal
sv.distribution = .FillEqually
return sv
}()
stackView.addArrangedSubview(leftButton)
stackView.addArrangedSubview(rightButton)
view.addSubview(containerView)
NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("|-[cv]-|", options: [], metrics: nil, views: ["cv": containerView]))
containerView.centerYAnchor.constraintEqualToAnchor(view.centerYAnchor).active = true
containerView.addSubview(imageView)
containerView.addSubview(stackView)
NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("|-[iv]-|", options: [], metrics: nil, views: ["iv": imageView]))
NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-[iv]-[sv]-|", options: [.AlignAllLeading, .AlignAllTrailing], metrics: nil, views: ["iv": imageView, "sv": stackView]))
let image = imageView.image!
imageView.addConstraint(NSLayoutConstraint(item: imageView, attribute: .Width, relatedBy: .Equal, toItem: imageView, attribute: .Height, multiplier: image.size.width / image.size.height, constant: 0))
and this is the result: