Resizing image to fit UIImageView

Question

I am very new to objective c and I'm just getting my bearings. I want to do something really simple but it proves to be quite a challenge:

I am trying to display an image into an UIImageView. The image I'm showing is large and I want it scaled down to fit the UIImageView. I tried setting the AspectFit View mode but the image gets displayed to the original size and is clipped by the UIImageView. My code is below:

- (void)changeImages
{
    UIImage* img11 = nil;

    img11 = [UIImage imageWithContentsOfFile: [[NSBundle mainBundle] pathForResource:@"dog" ofType:@"jpeg"]];

    u11.contentMode = UIViewContentModeScaleAspectFit;
    u11.image = img11;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    [self changeImages];
}

Can anyone shed some light on this please?

Thanks!

Syblesybley

Did you read #186152 ? Especially the second answer might be of interest. – Gwyn

By all rights, this should work. Things to check: Are you already setting the image in the nib/storyboard? If so, this could mask code not getting called. Is changeImages getting called? You can place a call to NSLog(@"changeImages called") to see if it is, or use a breakpoint. If it isn't, you may have forgotten to change the class of the ViewController in your nib/storyboard to the class of the code you wrote above. Is u11 specified as an IBOutlet and correctly linked up to the nib/storyboard? – Mercurio

If you are very new to objective c maybe the best is to use third library about image resizing such as github.com/mattgemmell/MGImageUtilities – Bisayas

What is the view hierarchy around u11 ? Maybe it's not the UIImageView that is clipping the image, but a parent view? – Lippold

What's the frame size of u11? Is its autresizesSubviews property set to YES? – Ample

Answer 1

Hi I would try this...

- (void)changeImages
{
    UIImage *img11 = [UIImage imageNamed@"dog.jpeg"];

    u11.contentMode = UIViewContentModeScaleAspectFit;
    u11.clipsToBounds = YES;
    [u11 setImage:img11];
}

- (void)viewWillAppear:animated
{
    [super viewWillAppear:animated];

    [self changeImages];
}

This will scale the image (up or down) so that it fits inside the imageView. Having clipsToBounds isn't necessary but will stop the image from displaying outside the frame of your imageView.

HTH.

Noiseless

In Swift 5 - UIViewContentModeScaleAspectFit is now "UIView.ContentMode.scaleAspectFit", and YES is now "true". Note that you might want to use the scaleAspectFill instead of scaleAspectFit, depending on the scenario. – Fortissimo

Answer 2

Add to your UIViewController.m:

-(UIImage *)resizeImage:(UIImage *)image imageSize:(CGSize)size
{
    UIGraphicsBeginImageContext(size);
    [image drawInRect:CGRectMake(0,0,size.width,size.height)];
    UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
    // here is the scaled image which has been changed to the size specified
    UIGraphicsEndImageContext();
    return newImage;
}

Using:

UIImage *image = [UIImage imageNamed:@"image.png"];
CGSize size = CGSizeMake(50, 63); // set the width and height 
UIImage *resizedImage = [self resizeImage:image imageSize:size];

I hope it helps.

Ro

So if I have a UITableView that is getting my data from online to populate the UITableViewCells picture and I want to resize my image this way to improve performance, do I call this method in cellForRowAtIndexPath? – Deerskin

Answer 3

CGSize size=CGSizeMake(79, 84);//set the width and height
UIGraphicsBeginImageContext(size);
[image drawInRect:CGRectMake(0,0,size.width,size.height)];
UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
//here is the scaled image which has been changed to the size specified
UIGraphicsEndImageContext();

This works for sure and don't forget to import QuartzCore FrameWork..

Have a Happy Coding (^_^)....

Committeewoman

+1 for the Quartz method. It does a better job of resizing than the standard UIKit contentMode property. – Undersell

Answer 4

You can also set View:Mode to Aspect Fit in the Attributes Inspector in Interface Builder

Oringa

Answer 5

I did the following and it helped change the mode to "aspect fill" from the default value "Scale to fill"

and add a line of code as follows (I did it in a cell configuration):

cell.photo.clipsToBounds = true

Kinin

Answer 6

I know this is old but I wanted to add a response based on the Stanford 193p 2017 lecture 11 (around 18:45) and for anyone looking in swift as this is the first search result that showed up for me.

Basically, subclass UIView and make it look like:

class U11: UIView {
    var myImage: UIImage? { didSet { setNeedsDisplay() }}
    override func draw(_ rect: CGRect) {
        myImage?.draw(in: bounds)
    }
}

Then set the image with:

func changeImage() {
    if let img11 = UIImage(named: "dog.jpeg"){
            u11.myImage = img11
    }
}

This is super simple and the image takes up the whole space inside of the views bounds.

Escarp