CODEWITHSUNDEEP
iosswiftuiimageviewuiimageaspect-ratio
SirRupertIII
SirRupertIII

Reputation: 12596

UIImageView keep aspect ratio, but fit to width

I have a UIImageView with a fixed width and height. I don't want to change the frame of the UIImageView. I want to have it hold an image where I keep the aspect ratio and I fit the width and let the image be either too tall, or too short for the UIImageView's frame. Like this:

UIImageView frame

The red is the UIImageView's frame. The gray is the actual image as it's displayed.

Upvotes: 20

Views: 32613

Answers (4)

Robert Dresler
Robert Dresler

Reputation: 11140

For my case solution was to set UIImageView's contentMode based on if ratio of image's height and width is bigger than of imageView's.

func setupImageViewContentMode() {
    if let image = imageView.image, image.size.height / image.size.width > imageView.frame.height / imageView.frame.width {
        imageView.contentMode = .scaleAspectFit
    } else {
        imageView.contentMode = .scaleAspectFill
    }
}

Also, note that you have to setup this according to current layout, so calling this method e.g. in layoutSubviews(), in viewDidLayoutSubviews(), after image is loaded from backend or wherever you need it does the job.

Upvotes: 1

Marlhex
Marlhex

Reputation: 1979

Swift 5.1 iOS 13

Because mine was on the header cell on a collection view this is what worked for me:

if headerCell!.imageView.frame.width > headerCell!.imageView.frame.height {
    headerCell!.imageView.contentMode = .scaleAspectFit
    //since the width > height we may fit it and we'll have bands on top/bottom
} else {
     headerCell!.imageView.contentMode = .scaleAspectFill
     //width < height we fill it until width is taken up and clipped on top/bottom
}

Upvotes: 3

Glenn
Glenn

Reputation: 2806

I think the best way to do it is to play with the mode of your imageView (Aspect Fill, Aspect Width, etc) and this is based on the ratio between the width and height of the image

if image.width > image.height {
    imageView.contentMode = UIViewContentModeScaleAspectFit
    //since the width > height we may fit it and we'll have bands on top/bottom
} else {
  imageView.contentMode = UIViewContentModeScaleAspectFill
  //width < height we fill it until width is taken up and clipped on top/bottom
}

UIViewContentModeScaleAspectFit

Scales the content to fit the size of the view by maintaining the aspect ratio. Any remaining area of the view’s bounds is transparent.

UIViewContentModeScaleAspectFill

Scales the content to fill the size of the view. Some portion of the content may be clipped to fill the view’s bounds.

I haven't tested it but off the top of my head this seems right

Upvotes: 33

Andy
Andy

Reputation: 4521

I think you need to compare the image aspect ratio to the aspect ratio of the UIImageView itself:

private func updateUI() {
    guard let image = image else { return }
    let viewAspectRatio = self.bounds.width / self.bounds.height
    let imageAspectRatio = image.size.width / image.size.height
    if viewAspectRatio > imageAspectRatio {
        self.contentMode = .scaleAspectFill
    } else {
        self.contentMode = .scaleAspectFit
    }
}

override var image: UIImage? { didSet { updateUI() }}

override func layoutSubviews() {
    super.layoutSubviews()
    updateUI()
}

Note: this is aspect fit width

Upvotes: 4

Related Questions