Setting UIImageView Width, Height, Aspect Ratio & Constraints X, Y

Question

I've set a UIImageView in my view controller and assigned constraints x & Y which works I'm trying to set the image width, height & aspect ratio but it doesn't seem to be working.

I've tried many answers already on here but can seem to get it working.

import UIKit

class GuestLoginViewController: UIViewController {

    let headerImage = UIImageView()

    override func viewDidLoad() {
        super.viewDidLoad()

        setHeaderImage()
    }

    func setHeaderImage() {
        view.addSubview(headerImage)
        headerImage.frame = CGRect(x: 0, y: 0, width: super.view.frame.width, height: 95)
        headerImage.translatesAutoresizingMaskIntoConstraints = false
        headerImage.mask?.contentMode = UIView.ContentMode.redraw
        headerImage.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        headerImage.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        headerImage.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true

        headerImage.image = UIImage(named: "header")
        view.sendSubviewToBack(headerImage)
    }


}

Did you try to change this line before the last line? headerImage.image = UIImage(named: "header") view.addSubview(headerImage) view.sendSubviewToBack(headerImage) or you can call headerImage.setNeedsLayout() — Val Nolav
@ValNolav I already have view.addSubview(headerImage) it's the first line in my function. I moved it after the headerImage.image = UIImage(named: "header") line but I then get error "terminating with uncaught exception of type NSException" — CIB
It is because of constraints line you are adding. You need to move view.addSubview(headerImage) above adding constraints line headerImage.topAnchor.constraint(equalTo: view.topAnchor).isActive = true — Val Nolav
@ValNolav still doesn't work even if move the line above the constraints or remove the constraints line the image is too big / height. imgur.com/a/M3ZatHA — CIB
As soon as you set headerImage.translatesAutoresizingMaskIntoConstraints = false, the frame is ignored. You need to set some constraint to establish the height of your UIImageView. Unfortunately, the image contents does not affect the height of the UIImageView. Set either 1) an absolute height constraint, 2) an offset from the bottom of the superView, 3) height relative to the width with a multiplier (an "aspect ratio constraint"). — vacawama

vacawama vacawama · Accepted Answer · 2019-05-17T21:39:39

As soon as you set headerImage.translatesAutoresizingMaskIntoConstraints = false, the frame is ignored. You need to set some constraint to establish the height of your UIImageView. Unfortunately, the image contents does not affect the height of the UIImageView.

Set either:

an absolute height constraint
an offset from the bottom of the superView
height relative to the width with a multiplier (an "aspect ratio constraint")

Based on my comment, you turned off headerImage.translatesAutoresizingMaskIntoConstraints = false and it worked.

This gives you extra constraints (your 3 plus the 4 that are generated from the frame), but luckily they aren't conflicting.

Instead, I would suggest you leave the translatesAutoresizingMaskIntoConstraints set to false and set a constraint for the height:

headerImage.heightAnchor.constraint(equalToConstant: 95).isActive = true

Setting UIImageView Width, Height, Aspect Ratio & Constraints X, Y

1 Answers