UIImageView aspect fit and center

Question

I have an image view, declared programmatically, and I am setting its image, also programmatically.

However, I find myself unable to set the image to both fit the aspect and align centre to the image view.

In other words, I want the image to:

Scale down to fit the aspect, if the image is large.
Centre but not scale up, if the image is small.

How do I get that?

[yourImageView setContentMode:UIViewContentModeCenter]; and make sure if imageView Frame is greater than image frame. if it's not then place [yourImageView setContentMode:UIViewContentModeAspectToFit]; — Manu, Mar 19 '13 at 12:22

score 216 · Answer 1 · edited Jul 08 '17 at 22:59

216

Just pasting the solution:

Just like @manohar said

imageView.contentMode = UIViewContentModeCenter;
if (imageView.bounds.size.width > ((UIImage*)imagesArray[i]).size.width && imageView.bounds.size.height > ((UIImage*)imagesArray[i]).size.height) {
       imageView.contentMode = UIViewContentModeScaleAspectFit;
}

solved my problem

edited Jul 08 '17 at 22:59

Luke

11,426
43
60
69

answered Mar 19 '13 at 12:35

Ravi Vooda

5,216
5
19
25

7

Shorter way to find out image is smaller: `CGRectContainsRect(imageView.bounds, {CGPointZero, image.size})` – Cfr Nov 14 '14 at 11:04
@Cfr maybe it's shorter, but not so readable. At the same time I propose to split line with if-statement like this: `CGSize imageSize = ((UIImage*)imagesArray[i]).size;`, `CGSize viewSize = imageView.bounds.size`, `if (viewSize.width > imageSize.width && viewSize.height > imageSize.height) {`. – Timur Bernikovich Dec 02 '16 at 16:29
1

Should be UIViewContentModeScaleAspectFit – NoelHunter Apr 06 '17 at 15:39
imageView.contentMode = UIViewContentModeScaleAspectFit; – Arjay Waran Jun 21 '17 at 21:07

Ali Raza · Answer 2 · 2017-09-05T06:09:09.727

82

In swift language we can set content mode of UIImage view like following as:

let newImgThumb = UIImageView(frame: CGRect(x: 10, y: 10, width: 100, height: 100))
newImgThumb.contentMode = .scaleAspectFit

edited Sep 05 '17 at 06:09

answered Nov 14 '14 at 06:00

Ali Raza

2,796
1
20
24

4

This blows up the image if it is smaller than the image view, contrary to what the OP asked for. – fishinear Sep 15 '18 at 11:01

Jonas Deichelmann · Answer 3 · 2019-12-21T15:45:54.773

38

Swift

yourImageView.contentMode = .center

You can use the following options to position your image:

scaleToFill
scaleAspectFit // contents scaled to fit with fixed aspect. remainder is transparent
redraw // redraw on bounds change (calls -setNeedsDisplay)
center // contents remain same size. positioned adjusted.
top
bottom
left
right
topLeft
topRight
bottomLeft
bottomRight

edited Dec 21 '19 at 15:45

answered Dec 10 '18 at 11:06

Jonas Deichelmann

3,513
1
30
45

Nate Cook · Answer 4 · 2018-09-19T22:33:55.300

12

Updated answer

When I originally answered this question in 2014, there was no requirement to not scale the image up in the case of a small image. (The question was edited in 2015.) If you have such a requirement, you will indeed need to compare the image's size to that of the imageView and use either UIViewContentModeCenter (in the case of an image smaller than the imageView) or UIViewContentModeScaleAspectFit in all other cases.

Original answer

Setting the imageView's contentMode to UIViewContentModeScaleAspectFit was enough for me. It seems to center the images as well. I'm not sure why others are using logic based on the image. See also this question: iOS aspect fit and center

edited Sep 19 '18 at 22:33

answered May 26 '14 at 23:14

Nate Cook

8,395
5
46
37

1

This blows up the image if it is smaller than the image view, contrary to what the OP asked for. – fishinear Sep 15 '18 at 11:01
1

@fishinear The requirement about not scaling the image up was added to the question a year after I answered it: https://stackoverflow.com/posts/15499376/revisions – Nate Cook Sep 19 '18 at 22:22

Nicejinux · Answer 5 · 2018-06-12T11:37:25.357

I solved this problem like this.

setImage to UIImageView (with UIViewContentModeScaleAspectFit)
get imageSize (CGSize imageSize = imageView.image.size)
UIImageView resize. [imageView sizeThatFits:imageSize]
move position where you want.

I wanted to put UIView on the top center of UICollectionViewCell. so, I used this function.

- (void)setImageToCenter:(UIImageView *)imageView
{
    CGSize imageSize = imageView.image.size;
    [imageView sizeThatFits:imageSize];
    CGPoint imageViewCenter = imageView.center;
     imageViewCenter.x = CGRectGetMidX(self.contentView.frame);
    [imageView setCenter:imageViewCenter];
}

It works for me.

Manish · Answer 6 · 2016-08-05T05:12:53.950

You can achieve this by setting content mode of image view to UIViewContentModeScaleAspectFill.

Then use following method method to get the resized uiimage object.

- (UIImage*)setProfileImage:(UIImage *)imageToResize onImageView:(UIImageView *)imageView
{
    CGFloat width = imageToResize.size.width;
    CGFloat height = imageToResize.size.height;
    float scaleFactor;
    if(width > height)
    {
        scaleFactor = imageView.frame.size.height / height;
    }
    else
    {
        scaleFactor = imageView.frame.size.width / width;
    }

    UIGraphicsBeginImageContextWithOptions(CGSizeMake(width * scaleFactor, height * scaleFactor), NO, 0.0);
    [imageToResize drawInRect:CGRectMake(0, 0, width * scaleFactor, height * scaleFactor)];
    UIImage *resizedImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return resizedImage;
}

Edited Here (Swift Version)

func setProfileImage(imageToResize: UIImage, onImageView: UIImageView) -> UIImage
{
    let width = imageToResize.size.width
    let height = imageToResize.size.height

    var scaleFactor: CGFloat

    if(width > height)
    {
        scaleFactor = onImageView.frame.size.height / height;
    }
    else
    {
        scaleFactor = onImageView.frame.size.width / width;
    }

    UIGraphicsBeginImageContextWithOptions(CGSizeMake(width * scaleFactor, height * scaleFactor), false, 0.0)
    imageToResize.drawInRect(CGRectMake(0, 0, width * scaleFactor, height * scaleFactor))
    let resizedImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return resizedImage;
}

score 8 · Answer 7 · answered Apr 20 '16 at 10:23

This subclass uses center if the image is not larger than the view, otherwise it scales down. I found this useful for a UIImageView that changes the size.

The image it displays is smaller than the view for large sizes, but larger than the view for small sizes. I want it only to scale down, but not up.

class CenterScaleToFitImageView: UIImageView {
    override var bounds: CGRect {
        didSet {
            adjustContentMode()
        }
    }

    override var image: UIImage? {
        didSet {
            adjustContentMode()
        }
    }

    func adjustContentMode() {
        guard let image = image else {
            return
        }
        if image.size.width > bounds.size.width ||
            image.size.height > bounds.size.height {
            contentMode = .ScaleAspectFit
        } else {
            contentMode = .Center
        }
    }
}

score 6 · Answer 8 · edited Jan 03 '16 at 13:44

6

let bannerImageView = UIImageView();
bannerImageView.contentMode = .ScaleAspectFit;
bannerImageView.frame = CGRectMake(cftX, cftY, ViewWidth, scrollHeight);

edited Jan 03 '16 at 13:44

Jakuje

24,773
12
69
75

answered Jan 03 '16 at 13:22

Antony Ouseph

552
4
10

This blows up the image if it is smaller than the image view, contrary to what the OP asked for. – fishinear Sep 15 '18 at 11:03

score 4 · Answer 9 · answered Dec 09 '13 at 05:58

4

[your_imageview setContentMode:UIViewContentModeCenter];

answered Dec 09 '13 at 05:58

souvickcse

7,742
5
37
64

19

This will ignore the scaling – Skrew Jan 22 '14 at 15:13
2

I don't know why solutions like this got so many upvotes. This person clearly didn't read the question at all. – slow Apr 20 '18 at 19:22

score 2 · Answer 10 · answered Apr 04 '18 at 09:12

For people looking for UIImage resizing,

@implementation UIImage (Resize)

- (UIImage *)scaledToSize:(CGSize)size
{
    UIGraphicsBeginImageContextWithOptions(size, NO, 0.0f);
    [self drawInRect:CGRectMake(0.0f, 0.0f, size.width, size.height)];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

- (UIImage *)aspectFitToSize:(CGSize)size
{
    CGFloat aspect = self.size.width / self.size.height;
    if (size.width / aspect <= size.height)
    {
        return [self scaledToSize:CGSizeMake(size.width, size.width / aspect)];
    } else {
        return [self scaledToSize:CGSizeMake(size.height * aspect, size.height)];
    }
}

- (UIImage *)aspectFillToSize:(CGSize)size
{
    CGFloat imgAspect = self.size.width / self.size.height;
    CGFloat sizeAspect = size.width/size.height;

    CGSize scaledSize;

        if (sizeAspect > imgAspect) { // increase width, crop height
            scaledSize = CGSizeMake(size.width, size.width / imgAspect);
        } else { // increase height, crop width
            scaledSize = CGSizeMake(size.height * imgAspect, size.height);
        }
    UIGraphicsBeginImageContextWithOptions(size, NO, 0.0f);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextClipToRect(context, CGRectMake(0, 0, size.width, size.height));
    [self drawInRect:CGRectMake(0.0f, 0.0f, scaledSize.width, scaledSize.height)];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

@end

UIImageView aspect fit and center

10 Answers10

Swift

Linked