UIImageView resizing to eliminate blank space IOS

Question

My UIImageView is in aspect fit mode which leaves blank space beneath the actual image.

The blue space is what I want to eliminate so the imageView wraps the image (if only I had wrap content). Seemed like an easy task but I soon realized that the image is in aspect fit so the image view changes the width and height of the image but then I would have to make a calculation on the image view based on that altered image which would make a never ending loop of shrinking the image.

I just want to remove the blank space to make it look more concise. Full project at GitHub: https://github.com/sak6lab/Closet-Space

Lamkin

Do you want to change the width to get consistent heights? Or change the height to get consistent widths? – Seldon

I'm sorry but I don't really understand the question. – Lamkin

@Seldon I think I want to change the height to get consistent widths however I already calculate the amount of width each cell has which in turn will be the same as the UIImageView. – Lamkin

I guess I was just wondering how you planned to layout side-by-side elements, where one image might be tall and narrow (like the T-Shirt) and the next might be short and wide (such as a shoe). If you're trying to resize the images to remove extra blank space, you may be happy with one but not the other. (kind of off-the-point of the actual size-to-aspect question though) – Seldon

Answer 1

I filed a radar recently for this as I believe it is broken behaviour.

Currently, the best way I have found to fix this is to add an aspect ratio constraint to the image view based on the aspect ratio of the image. (You'll have to update the constraint when the image changes though).

Something like...

imageView.widthAnchor.constraint(equalTo: imageView.heightAnchor, multiplier: image.size.width / image.size.height).isActive = true

You could wrap this into a UIImageView subclass maybe. Override the didSet of the image property or even just add a new function.

Be careful though as you need to make sure you only create one constraint and on subsequent passes you update the already existing constraint.

Ac

Thanks it definitely helped! – Lamkin

Answer 2

So based on Fogmeister answer,instead of width, change it to height and then height to width for the view

let newsize = self.feedImage.contentClippingRect

self.feedImage.heightAnchor.constraint(equalTo: self.feedImage.widthAnchor, multiplier:newsize.width / newsize.height).isActive = true

where newsize is the CGRect after we scale with .scaleaspectfit Note the below extension from https://www.hackingwithswift.com/example-code/uikit/how-to-find-an-aspect-fit-images-size-inside-an-image-view

extension UIImageView {
    var contentClippingRect: CGRect {
    guard let image = image else { return bounds }
    guard contentMode == .scaleAspectFit else { return bounds }
    guard image.size.width > 0 && image.size.height > 0 else { return bounds }

    let scale: CGFloat
    if image.size.width > image.size.height {
        scale = bounds.width / image.size.width
    } else {
        scale = bounds.height / image.size.height
    }

    let size = CGSize(width: image.size.width * scale, height: image.size.height * scale)
    let x = (bounds.width - size.width) / 2.0
    let y = (bounds.height - size.height) / 2.0
    //print ("image resizing[width=\(size.width), height=\(size.height)")
    return CGRect(x: x, y: y, width: size.width, height: size.height)
    }
}

Flameout