How to know the image size after applying aspect fit for the image in an UIImageView

Question

I am loading an image to an imageview with mode as 'Aspect Fit'. I need to know the size to which my image is being scaled to. Please help.

score 147 · Answer 1 · edited Dec 06 '17 at 03:23

147

Why not use the OS function AVMakeRectWithAspectRatioInsideRect?

edited Dec 06 '17 at 03:23

plgrenier

293
3
14

answered Jan 02 '13 at 09:01

Paul de Lange

10,613
10
41
56

23

This is exactly what is needed -- `[imageView setFrame:AVMakeRectWithAspectRatioInsideRect(image.size, imageView.frame)]`) – greg Jan 02 '13 at 19:53
1

Good and clean option. Here is the docs link http://developer.apple.com/library/ios/#documentation/AVFoundation/Reference/AVFoundation_Functions/Reference/reference.html – Popara Jul 29 '13 at 12:01
Don't want to include the AVFoundation framework? I'm posting two alternative utility functions to `AVMakeRectWithAspectRatioInsideRect()` in a separate answer. – Timo Jul 30 '13 at 13:29
1

This should be the accepted answer. The accepted answer above is not correct and wont work in different cases. – jjpp Aug 23 '15 at 12:09
1

For swifters: import AVFoundation let height = AVMakeRectWithAspectRatioInsideRect((image?.size)!, imageView.frame).height – Ben Sullivan Jun 21 '16 at 12:14

score 56 · Answer 2 · edited Apr 05 '16 at 08:24

I wanted to use AVMakeRectWithAspectRatioInsideRect() without including the AVFoundation framework.

So I've implemented the following two utility functions:

CGSize CGSizeAspectFit(CGSize aspectRatio, CGSize boundingSize)
{
    float mW = boundingSize.width / aspectRatio.width;
    float mH = boundingSize.height / aspectRatio.height;
    if( mH < mW )
        boundingSize.width = boundingSize.height / aspectRatio.height * aspectRatio.width;
    else if( mW < mH )
        boundingSize.height = boundingSize.width / aspectRatio.width * aspectRatio.height;
    return boundingSize;
}

CGSize CGSizeAspectFill(CGSize aspectRatio, CGSize minimumSize)
{
    float mW = minimumSize.width / aspectRatio.width;
    float mH = minimumSize.height / aspectRatio.height;
    if( mH > mW )
        minimumSize.width = minimumSize.height / aspectRatio.height * aspectRatio.width;
    else if( mW > mH )
        minimumSize.height = minimumSize.width / aspectRatio.width * aspectRatio.height;
    return minimumSize;
}

Edit: Optimized below by removing duplicate divisions.

CGSize CGSizeAspectFit(const CGSize aspectRatio, const CGSize boundingSize)
{
    CGSize aspectFitSize = CGSizeMake(boundingSize.width, boundingSize.height);
    float mW = boundingSize.width / aspectRatio.width;
    float mH = boundingSize.height / aspectRatio.height;
    if( mH < mW )
        aspectFitSize.width = mH * aspectRatio.width;
    else if( mW < mH )
        aspectFitSize.height = mW * aspectRatio.height;
    return aspectFitSize;
}

CGSize CGSizeAspectFill(const CGSize aspectRatio, const CGSize minimumSize)
{
    CGSize aspectFillSize = CGSizeMake(minimumSize.width, minimumSize.height);
    float mW = minimumSize.width / aspectRatio.width;
    float mH = minimumSize.height / aspectRatio.height;
    if( mH > mW )
        aspectFillSize.width = mH * aspectRatio.width;
    else if( mW > mH )
        aspectFillSize.height = mW * aspectRatio.height;
    return aspectFillSize;
}

End of edit

This takes a given size (first parameter) and maintains its aspect ratio. It then fills the given bounds (second parameter) as much as possible without violating the aspect ratio.

Using this to answer the original question:

// Using aspect fit, scale the image (size) to the image view's size.
CGSize sizeBeingScaledTo = CGSizeAspectFit(theImage.size, theImageView.frame.size);

Note how the image determines the aspect ratio, while the image view determines the size to be filled.

Feedback is very welcome.

This can be adjusted to use `CGFloats` if you're into that sort of thing. — Timo, Jul 30 '13 at 14:00
Excellent answer. You can also adjust it to center on a certain view, to get the actual CGRect of an image inside a UIImageView with AspectFit. I did something like this: CGSize imageSize = CGSizeAspectFit(imageView.image.size, imageView.frame.size); CGRect actualImageRect = CGRectMake(0, 0, imageSize.width, imageSize.height); actualImageRect.origin.x = imageView.center.x - imageSize.width / 2; actualImageRect.origin.y = imageView.center.y - imageSize.height / 2; — LilDwarf, Jul 12 '14 at 23:46
I have included an optimized version that removes the duplicate divisions. Now a branchless equivalent might be a fun challenge to come up with. :) — Timo, Dec 08 '15 at 11:46

Rayfleck · Accepted Answer · 2016-08-02T15:57:14.770

Please see @Paul-de-Lange's answer instead of this one

I couldn't find anything in an easily accessible variable that had this, so here is the brute force way:

- (CGSize) aspectScaledImageSizeForImageView:(UIImageView *)iv image:(UIImage *)im {

float x,y;
float a,b;
x = iv.frame.size.width;
y = iv.frame.size.height;
a = im.size.width;
b = im.size.height;

if ( x == a && y == b ) {           // image fits exactly, no scaling required
    // return iv.frame.size;
}
else if ( x > a && y > b ) {         // image fits completely within the imageview frame
    if ( x-a > y-b ) {              // image height is limiting factor, scale by height
        a = y/b * a;
        b = y;
    } else {
        b = x/a * b;                // image width is limiting factor, scale by width
        a = x;
    }
} 
else if ( x < a && y < b ) {        // image is wider and taller than image view
    if ( a - x > b - y ) {          // height is limiting factor, scale by height
        a = y/b * a;
        b = y;
    } else {                        // width is limiting factor, scale by width
        b = x/a * b;
        a = x;
    }
}
else if ( x < a && y > b ) {        // image is wider than view, scale by width
    b = x/a * b;
    a = x;
}
else if ( x > a && y < b ) {        // image is taller than view, scale by height
    a = y/b * a;
    b = y;
}
else if ( x == a ) {
    a = y/b * a;
    b = y;
} else if ( y == b ) {
    b = x/a * b;
    a = x;
}
return CGSizeMake(a,b);

}

This code is not accurate. It doesn't handle all cases. For example if you have a 2048 x 1536 image and try and fit into 514 x 402. It will return the scaled size of 402 (height) when it should scale it to the width. I changed `if ( a - x > b - y ) {` to `if ( a - x > b - y && (y/b * a) < x) {` to fix it. They other statements should be checked too. — renaun, Jan 04 '14 at 21:33
Hello Sir, I found this Anser Helpful but can you pls help me in my Question : http://stackoverflow.com/questions/22727615/ios-get-framing-of-visible-part-of-uiimage-from-uiimageview — Mrug, Mar 29 '14 at 07:28

Oleh Kudinov · Answer 4 · 2020-03-21T12:03:16.170

This simple function will calculate size of image after aspect fit:

Swift 5.1

extension UIImageView {

    var imageSizeAfterAspectFit: CGSize {
        var newWidth: CGFloat
        var newHeight: CGFloat

        guard let image = image else { return frame.size }

        if image.size.height >= image.size.width {
            newHeight = frame.size.height
            newWidth = ((image.size.width / (image.size.height)) * newHeight)

            if CGFloat(newWidth) > (frame.size.width) {
                let diff = (frame.size.width) - newWidth
                newHeight = newHeight + CGFloat(diff) / newHeight * newHeight
                newWidth = frame.size.width
            }
        } else {
            newWidth = frame.size.width
            newHeight = (image.size.height / image.size.width) * newWidth

            if newHeight > frame.size.height {
                let diff = Float((frame.size.height) - newHeight)
                newWidth = newWidth + CGFloat(diff) / newWidth * newWidth
                newHeight = frame.size.height
            }
        }
        return .init(width: newWidth, height: newHeight)
    }
}

Objective C:

 -(CGSize)imageSizeAfterAspectFit:(UIImageView*)imgview{


    float newwidth;
    float newheight;

    UIImage *image=imgview.image;

    if (image.size.height>=image.size.width){
        newheight=imgview.frame.size.height;
        newwidth=(image.size.width/image.size.height)*newheight;

        if(newwidth>imgview.frame.size.width){
            float diff=imgview.frame.size.width-newwidth;
            newheight=newheight+diff/newheight*newheight;
            newwidth=imgview.frame.size.width;
        }

    }
    else{
        newwidth=imgview.frame.size.width;
        newheight=(image.size.height/image.size.width)*newwidth;

        if(newheight>imgview.frame.size.height){
            float diff=imgview.frame.size.height-newheight;
            newwidth=newwidth+diff/newwidth*newwidth;
            newheight=imgview.frame.size.height;
        }
    }

    NSLog(@"image after aspect fit: width=%f height=%f",newwidth,newheight);


    //adapt UIImageView size to image size
    //imgview.frame=CGRectMake(imgview.frame.origin.x+(imgview.frame.size.width-newwidth)/2,imgview.frame.origin.y+(imgview.frame.size.height-newheight)/2,newwidth,newheight);

    return CGSizeMake(newwidth, newheight);

}

The accepted answer did not work for me. But this answer did. And the real beauty of this answer is that it does not need to pass any explicit reference of the UIImage, instead, it takes it from the image content of the UIImageView. It works with orientation change either. Thanks. — Ayan Sengupta, Nov 12 '13 at 20:59
Since this is always done on a UIImageView, it might be worth shaping it into a category method UIImageView. — Timo, Sep 01 '14 at 09:28

score 12 · Answer 5 · answered May 09 '17 at 05:12

Swift 3 Human Readable Version

extension UIImageView {

    /// Find the size of the image, once the parent imageView has been given a contentMode of .scaleAspectFit
    /// Querying the image.size returns the non-scaled size. This helper property is needed for accurate results.
    var aspectFitSize: CGSize {
        guard let image = image else { return CGSize.zero }

        var aspectFitSize = CGSize(width: frame.size.width, height: frame.size.height)
        let newWidth: CGFloat = frame.size.width / image.size.width
        let newHeight: CGFloat = frame.size.height / image.size.height

        if newHeight < newWidth {
            aspectFitSize.width = newHeight * image.size.width
        } else if newWidth < newHeight {
            aspectFitSize.height = newWidth * image.size.height
        }

        return aspectFitSize
    }

    /// Find the size of the image, once the parent imageView has been given a contentMode of .scaleAspectFill
    /// Querying the image.size returns the non-scaled, vastly too large size. This helper property is needed for accurate results.
    var aspectFillSize: CGSize {
        guard let image = image else { return CGSize.zero }

        var aspectFillSize = CGSize(width: frame.size.width, height: frame.size.height)
        let newWidth: CGFloat = frame.size.width / image.size.width
        let newHeight: CGFloat = frame.size.height / image.size.height

        if newHeight > newWidth {
            aspectFillSize.width = newHeight * image.size.width
        } else if newWidth > newHeight {
            aspectFillSize.height = newWidth * image.size.height
        }

        return aspectFillSize
    }

}

How about image origin position instead of Size? – karthikeyan Jan 12 '21 at 09:16 — karthikeyan, Jan 12 '21 at 09:16

score 11 · Answer 6 · answered Oct 30 '15 at 21:08

11

I also wanted to calculate height after the aspect ratio is applied to be able to calculate the height of table view's cell. So, I achieved via little math

ratio = width / height

and height would become

height = width / ratio

So code snippet would be

UIImage *img = [UIImage imageNamed:@"anImage"];
float aspectRatio = img.size.width/img.size.height;
float requiredHeight = self.view.bounds.size.width / aspectRatio;

answered Oct 30 '15 at 21:08

zeeawan

6,667
2
50
56

Elegant. I use it inside `UITableViewCell` class, so the `requiredHeight` becomes `float requiredHeight = self.bounds.size.width / aspectRatio;`. – oyalhi May 20 '16 at 07:13
You are brilliant! This should have been the accepted answer! – Marian Petrisor Sep 19 '18 at 20:29

score 9 · Answer 7 · answered Jun 18 '16 at 07:22

For Swift use below code

func imageSizeAspectFit(imgview: UIImageView) -> CGSize {
        var newwidth: CGFloat
        var newheight: CGFloat
        let image: UIImage = imgFeed.image!

        if image.size.height >= image.size.width {
            newheight = imgview.frame.size.height;
            newwidth = (image.size.width / image.size.height) * newheight
            if newwidth > imgview.frame.size.width {
                let diff: CGFloat = imgview.frame.size.width - newwidth
                newheight = newheight + diff / newheight * newheight
                newwidth = imgview.frame.size.width
            }
        }
        else {
            newwidth = imgview.frame.size.width
            newheight = (image.size.height / image.size.width) * newwidth
            if newheight > imgview.frame.size.height {
                let diff: CGFloat = imgview.frame.size.height - newheight
                newwidth = newwidth + diff / newwidth * newwidth
                newheight = imgview.frame.size.height
            }
        }

       print(newwidth, newheight)
        //adapt UIImageView size to image size
        return CGSizeMake(newwidth, newheight)
    }

And Call Function

imgFeed.sd_setImageWithURL(NSURL(string:"Your image URL")))
self.imageSizeAfterAspectFit(imgFeed)

score 7 · Answer 8 · answered Apr 13 '13 at 09:26

Maybe does not fit your case, but this simple approach solve my problem in a similar case:

    UIImageView *imageView = [[UIImageView alloc] initWithImage:bigSizeImage];
    [imageView sizeToFit];

After image view executes sizeToFit if you query the imageView.frame.size you will get the new image view size that fits the new image size.

score 5 · Answer 9 · answered Nov 29 '17 at 10:07

5

Swift 4: Frame for .aspectFit image is -

import AVFoundation

let x: CGRect = AVMakeRect(aspectRatio: myImage.size, insideRect: sampleImageView.frame)

answered Nov 29 '17 at 10:07

Jack

13,571
6
76
98

yes I done , but I don't have any space on y but it is returning as 40 – Kishore Kumar Jun 28 '18 at 08:30
That’s unexpected, have you tried with fresh view controller with single imageView with no constraints? – Jack Jun 28 '18 at 08:47
I tried on uiview xib , in that image view was there , origin x value is going to y and orgin y value is going to x . and I am using constraints. – Kishore Kumar Jun 28 '18 at 09:12
like you said it was a issue because of the constraints @Jack – Kishore Kumar Jun 28 '18 at 10:12

score 4 · Answer 10 · answered Jun 12 '12 at 06:38

+(UIImage *)CreateAResizeImage:(UIImage *)Img ThumbSize:(CGSize)ThumbSize 
{
    float actualHeight = Img.size.height;
    float actualWidth = Img.size.width;

    if(actualWidth==actualHeight) 
    {
        actualWidth = ThumbSize.width; 
        actualHeight = ThumbSize.height;
    }

    float imgRatio = actualWidth/actualHeight;
    float maxRatio = ThumbSize.width/ThumbSize.height; //320.0/480.0;


    if(imgRatio!=maxRatio)
    {
        if(imgRatio < maxRatio)
        {
            imgRatio = ThumbSize.height / actualHeight; //480.0 / actualHeight;
            actualWidth = imgRatio * actualWidth;
            actualHeight = ThumbSize.height; //480.0;
        }
        else
        {
            imgRatio = ThumbSize.width / actualWidth; //320.0 / actualWidth;
            actualHeight = imgRatio * actualHeight;
            actualWidth = ThumbSize.width; //320.0;
        }
    } 
    else 
    {
        actualWidth = ThumbSize.width;
        actualHeight = ThumbSize.height; 
    }


    CGRect rect = CGRectMake(0, 0, (int)actualWidth, (int)actualHeight);
    UIGraphicsBeginImageContext(rect.size);
    [Img drawInRect:rect];
    UIImage *NewImg = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return NewImg;
}

score 3 · Answer 11 · edited Jul 22 '19 at 06:52

3

This single line can do this job

CGSize sizeInView = AVMakeRectWithAspectRatioInsideRect(imgViewFake.image.size, imgViewFake.bounds).size;

edited Jul 22 '19 at 06:52

TheTiger

13,264
3
57
82

answered Mar 30 '17 at 10:18

Darshit Shah

2,366
26
33

score 3 · Answer 12 · answered May 24 '17 at 14:24

3

Swift 3 UIImageView extension:

import AVFoundation

extension UIImageView {
  var imageSize: CGSize {
    if let image = image {
      return AVMakeRect(aspectRatio: image.size, insideRect: bounds).size
    }
    return CGSize.zero
  }  
}

answered May 24 '17 at 14:24

Paul King

1,881
20
23

score 2 · Answer 13 · answered Aug 01 '14 at 18:19

The accepted answer is incredibly complicated and fails for some edge cases. I think this solution is much more elegant:

- (CGSize) sizeOfImage:(UIImage*)image inAspectFitImageView:(UIImageView*)imageView
{
    UKAssert(imageView.contentMode == UIViewContentModeScaleAspectFit, @"Image View must use contentMode = UIViewContentModeScaleAspectFit");

    CGFloat imageViewWidth = imageView.bounds.size.width;
    CGFloat imageViewHeight = imageView.bounds.size.height;

    CGFloat imageWidth = image.size.width;
    CGFloat imageHeight = image.size.height;

    CGFloat scaleFactor = MIN(imageViewWidth / imageWidth, imageViewHeight / imageHeight);

    return CGSizeMake(image.size.width*scaleFactor, image.size.height*scaleFactor);
}

score 2 · Answer 14 · answered Jan 16 '15 at 21:45

2

Here is my solution for same problem: https://github.com/alexgarbarev/UIImageView-ImageFrame

Advantages:

UIViewContentMode modes supported
Can query for scales and for rect separately
Can ask about image frame right from UIImageView

answered Jan 16 '15 at 21:45

Aleksey

875
8
8

score 2 · Answer 15 · answered Jun 20 '17 at 04:47

Here's my AVFoundation-less solution.

First here's a CGSize extension for calculating a size that would fit another size:

extension CGSize
{
    func sizeThatFitsSize(_ aSize: CGSize) -> CGSize
    {
        let width = min(self.width * aSize.height / self.height, aSize.width)
        return CGSize(width: width, height: self.height * width / self.width)
    }
}

So the solution to OP's problem gets down to:

let resultSize = image.size.sizeThatFitsSize(imageView.bounds.size)

Also here's another extension for fitting a rect within another rect (it utilizes the above CGSize extension):

extension CGRect
{
    func rectThatFitsRect(_ aRect:CGRect) -> CGRect
    {
        let sizeThatFits = self.size.sizeThatFitsSize(aRect.size)

        let xPos = (aRect.size.width - sizeThatFits.width) / 2
        let yPos = (aRect.size.height - sizeThatFits.height) / 2

        let ret = CGRect(x: xPos, y: yPos, width: sizeThatFits.width, height: sizeThatFits.height)
        return ret
    }
}

Li Jin · Answer 16 · 2021-04-02T18:09:55.277

Swift 5 Extension

extension CGSize {
    func aspectFit(to size: CGSize) -> CGSize {
        let mW = size.width / self.width;
        let mH = size.height / self.height;
        
        var result = size
        if( mH < mW ) {
            result.width = size.height / self.height * self.width;
        }
        else if( mW < mH ) {
            result.height = size.width / self.width * self.height;
        }
        
        return result;
    }
    
    func aspectFill(to size: CGSize) -> CGSize {
        let mW = size.width / self.width;
        let mH = size.height / self.height;
        
        var result = size
        if( mH > mW ) {
            result.width = size.height / self.height * self.width;
        }
        else if( mW > mH ) {
            result.height = size.width / self.width * self.height;
        }
        return result;
    }
}

score 1 · Answer 17 · answered Apr 14 '16 at 08:59

I'm using the following in Swift:

private func CGSizeAspectFit(aspectRatio:CGSize,boundingSize:CGSize) -> CGSize
{
    var aspectFitSize = boundingSize
    let mW = boundingSize.width / aspectRatio.width
    let mH = boundingSize.height / aspectRatio.height
    if( mH < mW )
    {
        aspectFitSize.width = mH * aspectRatio.width
    }
    else if( mW < mH )
    {
        aspectFitSize.height = mW * aspectRatio.height
    }
    return aspectFitSize
}

private func CGSizeAspectFill(aspectRatio:CGSize,minimumSize:CGSize) -> CGSize
{
    var aspectFillSize = minimumSize
    let mW = minimumSize.width / aspectRatio.width
    let mH = minimumSize.height / aspectRatio.height
    if( mH > mW )
    {
        aspectFillSize.width = mH * aspectRatio.width
    }
    else if( mW > mH )
    {
        aspectFillSize.height = mW * aspectRatio.height
    }
    return aspectFillSize
}

I'm using it like this:

let aspectSize  = contentMode == .ScaleAspectFill ? CGSizeAspectFill(oldSize,minimumSize: newSize) : CGSizeAspectFit(oldSize, boundingSize: newSize)

let newRect = CGRect( x: (newSize.width - aspectSize.width)/2, y: (newSize.height - aspectSize.height)/2, width: aspectSize.width, height: aspectSize.height)

CGContextSetFillColorWithColor(context,IOSXColor.whiteColor().CGColor)
CGContextFillRect(context, CGRect(origin: CGPointZero,size: newSize))
CGContextDrawImage(context, newRect, cgImage)

score 1 · Answer 18 · answered Jun 01 '17 at 08:22

If you know only the width of the imageview and when the height of the image is dynamic then you need to scale the image's height according to the given width to remove the white spaces above and below your image. Use the following method from here to scale the height of the image according to the standard width of your screen.

-(UIImage*)imageWithImage: (UIImage*) sourceImage scaledToWidth: (float) i_width
{
    float oldWidth = sourceImage.size.width;
    float scaleFactor = i_width / oldWidth;

    float newHeight = sourceImage.size.height * scaleFactor;
    float newWidth = oldWidth * scaleFactor;

    UIGraphicsBeginImageContext(CGSizeMake(newWidth, newHeight));
    [sourceImage drawInRect:CGRectMake(0, 0, newWidth, newHeight)];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();    
    UIGraphicsEndImageContext();
    return newImage;
}

And call it from your cellForRowAtIndexPath: method like this:

UIImage *img = [dictImages objectForKey:yourImageKey]; // loaded the image
cell.imgView.image = [self imageWithImage:img scaledToWidth:self.view.frame.size.width];

fewlinesofcode · Answer 19 · 2018-09-24T10:12:35.057

Swift 4 version

extension CGSize {
   enum AspectMode {
       case fit
       case fill
   }

   enum Orientation {
       case portrait
       case landscape
   }

   func aspectCorrectSizeToFit(targetSize: CGSize, aspectMode: AspectMode = .fill) -> CGSize {
        switch aspectMode {
        case .fill: return aspectFill(targetSize: targetSize)
        case .fit: return aspectFit(targetSize: targetSize)
        }
    }

    var orientation: Orientation {
        if height >= width { return .portrait }
        else { return .landscape }
    }

    func aspectFit(targetSize: CGSize) -> CGSize {
        let wRatio = targetSize.width / width
        let hRatio = targetSize.height / height
        let scale = min(wRatio, hRatio)
        return applying(CGAffineTransform(scaleX: scale, y: scale))
    }

    func aspectFill(targetSize: CGSize) -> CGSize {
        let wRatio = targetSize.width / width
        let hRatio = targetSize.height / height
        let scale = max(wRatio, hRatio)
        return applying(CGAffineTransform(scaleX: scale, y: scale))
    }
}

score 0 · Answer 20 · edited May 18 '16 at 07:08

The above mentioned methods never give the required values.As aspect fit maintains the same aspect ratio we just need simple maths to calculate the values

Detect the aspect ratio

CGFloat imageViewAspectRatio = backgroundImageView.bounds.size.width / backgroundImageView.bounds.size.height;
CGFloat imageAspectRatio =  backgroundImageView.image.size.width / backgroundImageView.image.size.height;
CGFloat mulFactor = imageViewAspectRatio/imageAspectRatio;

Get the new values

CGFloat newImageWidth = mulFactor * backgroundImageView.bounds.size.width;
CGFloat newImageHeight = mulFactor * backgroundImageView.bounds.size.height;

How to know the image size after applying aspect fit for the image in an UIImageView

20 Answers20

Linked

Related