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.

I mean I want to use both content mode in my ImageView. Is it possible? — V-Dev, Dec 19 '17 at 10:14
@V-Dev. what u want to achieve only top or centre crop of the image — Uma Madhavi, Dec 19 '17 at 10:17
I want AspectFill From top of the image. as you can see my AspectFill Cut head of image. — V-Dev, Dec 19 '17 at 10:19

Tamás Sengel · Accepted Answer · 2020-01-13T11:19:57.493

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

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

budiDino · Answer 3 · 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 2 · Answer 4 · 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)

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

0

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.

1

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

5 Answers5