Problems scaling a UIImage to fit a UIButton

Question

I have a set of buttons and different sized images. I want to scale each image in order that it fits the button in the correct aspect ratio. Once I've scaled the image, I set the button's image property to the scaled version.

    UIImage *scaledImage = [image scaledForButton:pickerButton];
    [pickerButton setImage:scaledImage forState:UIControlStateNormal];

my scaledForButton method is defined in a class extension for UIImage. It looks like this:

- (UIImage *)scaledForButton:(UIButton *)button 
{
    // Check which dimension (width or height) to pay respect to and
    // calculate the scale factor
    CGFloat imageRatio = self.size.width / self.size.height; 
    CGFloat buttonRatio = button.frame.size.width / button.frame.size.height;
    CGFloat scaleFactor = (imageRatio > buttonRatio ? self.size.width/button.frame.size.width : self.size.height/button.frame.size.height);

    // Create image using scale factor
    UIImage *scaledimage = [UIImage imageWithCGImage:[self CGImage]
                                               scale:scaleFactor
                                         orientation:UIImageOrientationUp];
    return scaledimage;    
}

When I run this on an iPad2 it works fine and the images are scaled correctly. However if I run it on a retina display (both in the simulator and on a device) the image does not scale correctly and is squished into the button.

Any ideas why this would happen on retina only? I've been scratching my head for a couple of days but can't figure it out. They're both running the same iOS and I've checked the scale and ratio outputs, which are always the same, regardless of device. Many thanks.

it maybe " CGFloat scaleFactor = (imageRatio > buttonRatio)? self.size.width/button.frame.size.width : self.size.height/button.frame.size.height; " — lu yuan, Jul 05 '12 at 13:43
Yeah I've logged them for both devices and they're the same each time. I'm using 2x images for the retina display. Is it possible that the program is resizing the 1x's and then using the 2x's instead? — Smikey, Jul 05 '12 at 14:12
Did you check the dimensions of the CGImage? The dimensions of the CGImage in case of retina would be twice that of the non-retina version. (or not?) But the scaleFactor is always the same in UI... coordinates. — Hermann Klecker, Jul 05 '12 at 14:38
Just to give an alternative: I personally would work with the .contentMode and assign the image to a temporary image view of the size of the button. The contentMode could vary depending on (imageRatio > buttonRatio), but not nessessarily (I am not quite sure what you want to achive). Then determine the size of the .image of the image view and go from there. — Hermann Klecker, Jul 05 '12 at 14:40

score 0 · Answer 1 · edited May 23 '17 at 12:12

Found the answer here: UIButton doesn't listen to content mode setting?

If you're setting the .contentMode, it seems you have to set the imageView property of the UIButton, not just the UIButton, then it worked properly.

The problem on iPad 3 was as Herman suggested - the CGImage was still a lot larger than the UIButton, so even though it was scaled down, it still had to be resized to fit the button.

Problems scaling a UIImage to fit a UIButton

1 Answers1