How to make background image fit properly in scroll view?

Question

The scaleAspectfit seem to not be working. I'm trying to make my whole background image to fit slightly into the background, seeing more of the image. I've added a scroll view so users can scroll up and down a little bit to see the image.

However, my app is too zoomed into the image.

lazy var scrollView: UIScrollView = {
    let view = UIScrollView()
    view.translatesAutoresizingMaskIntoConstraints = false
    view.contentSize.height = 800
    view.bounces = true
    return view
}() 

override func viewDidLoad() { super.viewDidLoad()

    let backgroundImage = UIImageView(frame: UIScreen.main.bounds)
    backgroundImage.image = UIImage(named: "backgroundImage.png")
    backgroundImage.contentMode = UIViewContentMode.scaleAspectFit
    view.insertSubview(backgroundImage, at: 0)

    view.addSubview(scrollView)
    scrollView.anchor(top: view.topAnchor, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)

    scrollView.addSubview(backgroundImage)
    backgroundImage.center(x: scrollView.centerXAnchor, y: scrollView.centerYAnchor)


 }

// this is just the extension i'm using for autolayouts if you guys are wondering

extension UIView {

func anchor(top: NSLayoutYAxisAnchor?, left: NSLayoutXAxisAnchor?, bottom: NSLayoutYAxisAnchor?, right: NSLayoutXAxisAnchor?, paddingTop: CGFloat, paddingLeft: CGFloat, paddingBottom: CGFloat, paddingRight: CGFloat, width: CGFloat, height: CGFloat) {

    translatesAutoresizingMaskIntoConstraints = false

    if let top = top {
        topAnchor.constraint(equalTo: top, constant: paddingTop).isActive = true
    }

    if let left = left {
        leftAnchor.constraint(equalTo: left, constant: paddingLeft).isActive = true
    }

    if let bottom = bottom {
        bottomAnchor.constraint(equalTo: bottom, constant: -paddingBottom).isActive = true
    }

    if let right = right {
        rightAnchor.constraint(equalTo: right, constant: -paddingRight).isActive = true
    }

    if width != 0 {
        widthAnchor.constraint(equalToConstant: width).isActive = true
    }

    if height != 0 {
        heightAnchor.constraint(equalToConstant: height).isActive = true
    }

func center(x: NSLayoutXAxisAnchor?, y: NSLayoutYAxisAnchor? ) {

    translatesAutoresizingMaskIntoConstraints = false

    if let x = x {
        centerXAnchor.constraint(equalTo: x).isActive = true
    }

    if let y = y {
        centerYAnchor.constraint(equalTo: y).isActive = true
    }
}
}

Answer 1

First you add the same imageView in 2 places here

view.insertSubview(backgroundImage, at: 0)

and here

scrollView.addSubview(backgroundImage)

so eventually it will be added only to the scrollView since it's one object

Second you need to constraint the imageView like this

backgroundImage.anchor(top: scrollView.topAnchor, left: scrollView.leftAnchor, bottom: scrollView.bottomAnchor, right: scrollView.rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)

and then according to scrollView content the imageView will stretch

Third contentMode should be either

backgroundImage.contentMode =.scaleToFill // or .scaleAspectFill

Should mention that you can add the imageView to the self.view and make the scrollView background transparent to avoid losing quality and aspect of the imageView caused by stretching