Alignment UIImageView with Aspect Fit

Question

for my UIImageView I choose Aspect Fit (InterfaceBuilder) but how can I change the vertical alignment?

Answer 1

If using Storyboards this can be achieved with constraints...

Firstly a UIView with the desired final frame / constraints. Add a UIImageView to the UIView. Set the contentMode to Aspect Fill. Make the UIImageView frame be the same ratio as the image (this avoids any Storyboard warnings later). Pin the sides to the UIView using standard constraints. Pin the top OR bottom (depending where you want it aligned) to the UIView using standard constraints. Finally add an aspect ratio constraint to the UIImageView (making sure ratio as the image).

Answer 2

Try setting:

imageView.contentMode = UIViewContentModeScaleAspectFit;
imageView.clipsToBounds = YES;

This worked for me.

Answer 3

To align a scale-to-fit image use auto layout. Example right aligned image after scale-to-fit in UIImageView:

1. Create UIImageView that holds the image
2. Add auto constraints for right, top, bottom, width
3. Set the image:

myUIImageView.contentMode = .ScaleAspectFit
myUIImageView.translatesAutoresizingMaskIntoConstraints = false
myUIImageView.image = UIImage(named:"pizza.png")

Your aspect fit scaled image is now right aligned in the UIImageView

+----------------------------------+
|                           [IMAGE]|
+----------------------------------+

Change the constraints to align differently within the imageview.

Answer 4

I used UIImageViewAligned for changing the alignment of image thanks to the developer

UIImageViewAligned

Answer 5

This is a bit tricky one since there is no option to set further alignment rules if you already selected a content mode (.scaleAspectFit).

But here's a workaround to this:

First need to resize your source image explicitly by calculating dimensions (if it'd be in a UIImageView with contentMode = .scaleAspectFit).

extension UIImage {

    func aspectFitImage(inRect rect: CGRect) -> UIImage? {
        let width = self.size.width
        let height = self.size.height
        let scaleFactor = width > height ? rect.size.height / height : rect.size.width / width

        UIGraphicsBeginImageContextWithOptions(CGSize(width: width * scaleFactor, height: height * scaleFactor), false, 0.0)
        self.draw(in: CGRect(x: 0.0, y: 0.0, width: width * scaleFactor, height: height * scaleFactor))

        defer {
            UIGraphicsEndImageContext()
        }

        return UIGraphicsGetImageFromCurrentImageContext()
    }
}

Then you simply need to call this function on your original image by passing your imageView's frame, and assign the result to your UIImageView.image property. Also make sure you set your imageView's desired contentMode here (or even in the Interface Builder)!

let image = UIImage(named: "MySourceImage")
imageView.image = image?.aspectFitImage(inRect: imageView.frame)
imageView.contentMode = .left

Answer 6

I know this is an old thread, but I thought I'd share what I did to easily change the clipped region from the top to the bottom of the image view in Interface Builder, in case anyone had the same problem I did. I had a UIImageView that filled the View of my ViewController, and was trying to make the top stay the same, independent of the size of the device's screen.

1. I applied the retina 4 form factor (Editor->Apply Retina 4 Form Factor).

2. I pinned the height and width.

Now, when the screen changes size, the UIImageView is actually the same size, and the view controller just clips what is off the screen. The frame origin stays at 0,0, so the bottom and right of the image are clipped, not the top.

Hope this helps.