Is it possible to use the aspect fill content mode combined with the top content mode in UIImageView?

Question

For a UIImageView, I am using the aspect fill content mode. It's OK, but for some images, it will cut from the top because I used clipsToBounds = true. So here is what I want: I want to make the two filters active at the same time, for example:

Here is an image view that I set to aspect fill:

...and an image view I set using contentMode = .top:

So I want to merge these two content modes. Is it possible? Thanks in advance.

score 20 · Accepted Answer · edited Jul 25 '23 at 12:21

Note This approach involves literally building a new image, which is extremely non-performant and would only be used in unusual situations. It's trivial to move and scale a UIImageView in a number of different ways.

--

Update: device scaling is now properly handled, thanks to budidino for that!

You should resize the image, so that it will have the width of your image view, but by keeping its aspect ratio. After that, set the image view's content mode to .top and enable clipping to bounds for it.

The resizeTopAlignedToFill function is a modified version of this answer.

func setImageView() {
    imageView.contentMode = .top
    imageView.clipsToBounds = true

    let image = <custom image>
    imageView.image = image.resizeTopAlignedToFill(newWidth: imageView.frame.width)
}

extension UIImage {
    func resizeTopAlignedToFill(newWidth: CGFloat) -> UIImage? {
        let newHeight = size.height * newWidth / size.width
        
        let newSize = CGSize(width: newWidth, height: newHeight)
        
        UIGraphicsBeginImageContextWithOptions(newSize, false, UIScreen.main.scale)
        draw(in: CGRect(origin: .zero, size: newSize))
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        
        return newImage
    }
}

This isn't keeping the aspect ratio of the image, the height stays the same and the width is updated so the image is squashed/stretched. — James P, Jan 13 '20 at 10:35
@JamesP You're right, thanks for the notice, the calculation of `newHeight` was missing. I updated my code. — Tamás Sengel, Jan 13 '20 at 11:20
This is an incredibly bad idea. It's horrifically wrong. You simply do this: https://stackoverflow.com/a/38502613/294884 — Fattie, Mar 23 '23 at 19:42

score 5 · Answer 2 · answered Dec 19 '17 at 11:56

5

Try this:

imageView.contentMode = UIViewContentModeTop;
imageView.image = [UIImage imageWithCGImage:image.CGImage scale:image.size.width / imageView.frame.size.width orientation:UIImageOrientationUp];

answered Dec 19 '17 at 11:56

Sergey Fyodorov

59
3

score 3 · Answer 3 · answered May 18 '19 at 14:30

This is my solution. First, you set comtentMode to top then you resize image

func resize(toWidth scaledToWidth: CGFloat) -> UIImage {
        let image = self
        let oldWidth = image.size.width
        let scaleFactor = scaledToWidth / oldWidth
        let newHeight = image.size.height * scaleFactor
        let newWidth = oldWidth * scaleFactor
        let scaledSize = CGSize(width:newWidth, height:newHeight)
        UIGraphicsBeginImageContextWithOptions(scaledSize, false, 0)
        image.draw(in: CGRect(x: 0, y: 0, width: scaledSize.width, height: scaledSize.height))
        let scaledImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return scaledImage!
    }

imageView.contentMode = .top
imageView.image = imageView.resize(toWidth:imageView.frame.width)

budiDino · Answer 4 · 2019-01-30T11:00:56.513

The accepted answer was scaling down the image and therefore lowering the quality on @2x and @3x devices. This should produce the same result with better image quality:

extension UIImage {
  func resizeTopAlignedToFill(containerSize: CGSize) -> UIImage? {
    let scaleTarget = containerSize.height / containerSize.width
    let scaleOriginal = size.height / size.width

    if scaleOriginal <= scaleTarget { return self }

    let newHeight = size.width * scaleTarget
    let newSize = CGSize(width: size.width, height: newHeight)

    UIGraphicsBeginImageContextWithOptions(newSize, false, scale)
    self.draw(in: CGRect(origin: .zero, size: newSize))
    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return newImage
  }
}

then to use it just:

imageView.contentMode = .scaleAspectFill
imageView.clipsToBounds = true
imageView.image = UIImage(named: "portrait").resizeTopAlignedToFill(containerSize: imageView.frame.size)

I just tested this code and it scales the image incorrectly, so it looks like it's stretched. — Tamás Sengel, Apr 05 '19 at 13:57
Otherwise, thank you for the info about the incorrect 2x and 3x scaling, I'll update my answer! — Tamás Sengel, Apr 05 '19 at 13:57

score -1 · Answer 5 · answered Mar 05 '20 at 07:13

-1

as a matter of performance I would suggest to put the UIImageView with the full image size / aspect ratio into a ContainerView with clipsToBounds set to true.

answered Mar 05 '20 at 07:13

Christoph A. B.

9
1

score -2 · Answer 6 · answered Apr 21 '23 at 17:03

-2

Swift 5:

imageView.contentMode = .top
if let image = UIImage(named: "xxx"),
   let cgImage = image.cgImage {
    imageView.image = UIImage(cgImage: cgImage, scale: image.size.width / view.frame.size.width * UIScreen.main.scale, orientation: .up)
}

answered Apr 21 '23 at 17:03

Sam Xu

252
3
5

Is it possible to use the aspect fill content mode combined with the top content mode in UIImageView?

6 Answers6