Ios – UIViewContentModeScaleAspectFill not clipping

iosuiimageview

I'm trying to draw some thumbnail images at a fixed size (100×100) using UIImageView. I've set the frame size of my image view to be 100×100, and set the contentMode to UIViewContentModeScaleAspectFill.

My understanding is that this should cause the image to be drawn at the size I set, and the image will fill the area of the image, and clip any portions of the image that are outside the size I set for the image view. However, the image is still drawn larger or smaller than the 100×100 size that I set for it.

If I set the contentMode to UIviewContentModeScaleToFill, then the image is drawn at exactly 100×100, but it's distorted to fit into those dimensions. Any ideas why the aspect fill isn't clipping as expected?

Here's my code:

_photoView = [[UIImageView alloc] initWithImage:photoImage];
_photoView.contentMode = UIViewContentModeScaleAspectFill;
[self addSubview:_photoView];

CGRect photoFrame = _photoView.frame;
photoFrame.size = CGSizeMake(100, 100);
_photoView.frame = photoFrame;

To better illustrate, here's an screenshot of what I'm seeing. The green squares are the UIView containing the UIImageView I'm working with. I've set their background color to green, and the frame of the view to 100×100. As a test, the UIImageViews are sized to 50×50. As you can see, when using the ...AspectFill, the images aren't sized to 50×50, and in some cases are offset from where I'd like them. When using ...ScaleToFill, they're sized correctly, but the image is distorted.

Screenshot illustrating problem

Best Answer

Can you try setting clip to bounds

[_photoview setClipsToBounds:YES];

Or directly in your Storyboard / Xib if you can :

Related Solutions

Ios – How to crop a UIImageView to a new UIImage in ‘aspect fit’ mode

Based on my other answer to a similar question I have written this method for a UIImageView category:

-(CGRect) cropRectForFrame:(CGRect)frame
{
    NSAssert(self.contentMode == UIViewContentModeScaleAspectFit, @"content mode must be aspect fit");

    CGFloat widthScale = self.bounds.size.width / self.image.size.width;
    CGFloat heightScale = self.bounds.size.height / self.image.size.height;

    float x, y, w, h, offset;
    if (widthScale<heightScale) {
        offset = (self.bounds.size.height - (self.image.size.height*widthScale))/2;
        x = frame.origin.x / widthScale;
        y = (frame.origin.y-offset) / widthScale;
        w = frame.size.width / widthScale;
        h = frame.size.height / widthScale;
    } else {
        offset = (self.bounds.size.width - (self.image.size.width*heightScale))/2;
        x = (frame.origin.x-offset) / heightScale;
        y = frame.origin.y / heightScale;
        w = frame.size.width / heightScale;
        h = frame.size.height / heightScale;
    }
    return CGRectMake(x, y, w, h);
}

You can pass in the frame of your green rect (assuming it is a subview of the image view) and get the crop rect back for cropping the UIImage. Note that it only works for 'aspect fit' mode! I haven't tested it though. So, tell me if it works!

Ios – UIImageView missing images in Launch Screen on device

Turn if off and then on again.

Seriously, restart the device — that’s what fixed it for me.

Here’s what didn’t work:

Cleaning DerivedData
Cleaning the project
Uninstalling the app from the device
Restarting Xcode
Restarting the computer

Older observations:

Just like the others, it:

Works fine in the Simulator
Used to work on the devices (iPhone 5S, iPad Air)
No code changes (verified via git reset --hard HEAD), yet stopped working.

What I remember triggering the first build where it stopped working was unplugging the iPhone while it was runnning. (Not sure if it’s related.)

However, the git reset not fixing it (combined with all the clean steps not working) tells me it this must be getting cached somewhere else. Quite possibly in one of the .gitignored files? (I’m using Git ignore file for Xcode projects)

One workaround that worked for one UIImageView (in the UIView that has three) but not for the others was putting the image into an .xcassets file. Reverting to the plain image file did not undo the fix. (Really feels like a caching error.)

UPDATE: See top — restarting the device is what fixed it. I get the feeling the wrong bitmap data is being cached on the device itself.

Radar: http://openradar.appspot.com/23534818

Related Topic