Uiimageview Aspect Fit and Center

AutoLayout: UIImageView and Aspect Fit content mode

This is happenning because you've set width and height constraints as <=.
For small images imageView's frame is calculated without any issues and all constraints are satisfied. But when a big image is set, imageView's size is going to be set so that the image fits, but at the same it is limited by the size of the superview (screen size).

  • If you know aspect ratio for sure, you can set it as a constraint and
    you won't see any green background.
  • Otherwise just leave your
    constraints as they are and set background color to clear color. This
    way any unoccupied zones will be transparent and any image you set
    will take maximum space in at least one dimension.

Edit:

Probably not the best solution, kind of oldschool. You can add strict width and height constraints and calculate them manually using image's aspectRatio:

@IBOutlet weak var heightConstraint: NSLayoutConstraint!
@IBOutlet weak var widthConstraint: NSLayoutConstraint!

func setImage(image: UIImage) {
imageView.image = image
let screenSize = UIScreen.main.bounds.size

let imageAspectRatio = image.size.width / image.size.height
let screenAspectRatio = screenSize.width / screenSize.height

if imageAspectRatio > screenAspectRatio {
widthConstraint.constant = min(image.size.width, screenSize.width)
heightConstraint.constant = widthConstraint.constant / imageAspectRatio
}
else {
heightConstraint.constant = min(image.size.height, screenSize.height)
widthConstraint.constant = heightConstraint.constant * imageAspectRatio
}
view.layoutIfNeeded()
}

Swift UIImageView Stretched Aspect

I added an autoresizing mask to the UIImageView and it now displays the correct ratios.

imageView.autoresizingMask = UIViewAutoresizing.FlexibleBottomMargin | UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleRightMargin | UIViewAutoresizing.FlexibleLeftMargin | UIViewAutoresizing.FlexibleTopMargin | UIViewAutoresizing.FlexibleWidth
imageView.contentMode = UIViewContentMode.ScaleAspectFit

This answer helped me: Captured photo is stretched with AVCaptureSession sessionPreset = AVCaptureSessionPresetPhoto as I was using an image that was taken through the phones camera.

UIImageView keep aspect ratio, but fit to width

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

How do you get the aspect fit size of a uiimage in a uimageview?

Actually, there is a function in AVFoundation that can calculate this for you:

import AVFoundation

let fitRect = AVMakeRect(aspectRatio: image.size, insideRect: imageView.bounds)

now fitRect.size is the size inside the imageView bounds by maintaining the original aspect ratio.

UIImageView aspect fit to height

UIImage *originalImage = [UIImage imageNamed:@"image.png"];
double width = originalImage.size.width;
double height = originalImage.size.height;
double apect = width/height;

double nWidth = 320.f/ apect;
self.img.frame = CGRectMake(0, 0, nWidth, 320.f);
self.img.center = self.view.center;
self.img.image = originalImage;

How do I center and aspect fit an image in Swift 3?

You can try it

let mainImage = UIImage(named:"WhiteLogoFront")
var mainImageView = UIImageView(image:mainImage)
mainImageView.contentMode = .ScaleAspectFit


Related Topics



Leave a reply



Submit