UIButton image scale in AspectFit?

Question

I want to add an image to UIButton, and also want to scale my image in accordance with UIButton (make the image smaller). Please show me how to do this.

This is what I tried, but it does not work:

• Adding an image to a button and using setContentMode :

 [self.itemImageButton setImage:stretchImage forState:UIControlStateNormal]; [self.itemImageButton setContentMode:UIViewContentModeScaleAspectFit]; 

• Creating a "stretch image":

 UIImage *stretchImage = [updatedItem.thumbnail stretchableImageWithLeftCapWidth:0 topCapHeight:0]; 

Answer 1

If you really want to scale the image, do it, but you must resize it before using it. Resizing it at runtime will simply lose processor cycles.

This is the category I use to scale the image:

UIImage + Extra.h

 @interface UIImage (Extras) - (UIImage *)imageByScalingProportionallyToSize:(CGSize)targetSize; @end; 

UIImage + Extra.m

 @implementation UIImage (Extras) - (UIImage *)imageByScalingProportionallyToSize:(CGSize)targetSize { UIImage *sourceImage = self; UIImage *newImage = nil; CGSize imageSize = sourceImage.size; CGFloat width = imageSize.width; CGFloat height = imageSize.height; CGFloat targetWidth = targetSize.width; CGFloat targetHeight = targetSize.height; CGFloat scaleFactor = 0.0; CGFloat scaledWidth = targetWidth; CGFloat scaledHeight = targetHeight; CGPoint thumbnailPoint = CGPointMake(0.0,0.0); if (!CGSizeEqualToSize(imageSize, targetSize)) { CGFloat widthFactor = targetWidth / width; CGFloat heightFactor = targetHeight / height; if (widthFactor < heightFactor) scaleFactor = widthFactor; else scaleFactor = heightFactor; scaledWidth = width * scaleFactor; scaledHeight = height * scaleFactor; // center the image if (widthFactor < heightFactor) { thumbnailPoint.y = (targetHeight - scaledHeight) * 0.5; } else if (widthFactor > heightFactor) { thumbnailPoint.x = (targetWidth - scaledWidth) * 0.5; } } // this is actually the interesting part: UIGraphicsBeginImageContextWithOptions(targetSize, NO, 0); CGRect thumbnailRect = CGRectZero; thumbnailRect.origin = thumbnailPoint; thumbnailRect.size.width = scaledWidth; thumbnailRect.size.height = scaledHeight; [sourceImage drawInRect:thumbnailRect]; newImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); if(newImage == nil) NSLog(@"could not scale image"); return newImage ; } @end 

You can use it in the size you need. For example:

 [self.itemImageButton setImage:[stretchImage imageByScalingProportionallyToSize:CGSizeMake(20,20)]]; 

Answer 2

I had the same problem. Just install the ContentMode ImageView, which is inside the UIButton.

 [[self.itemImageButton imageView] setContentMode: UIViewContentModeScaleAspectFit]; [self.itemImageButton setImage:[UIImage imageNamed:stretchImage] forState:UIControlStateNormal]; 

Hope this helps.

Answer 3

None of the answers here worked for me, I solved the problem with the following code:

 button.contentMode = UIViewContentModeScaleToFill; button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentFill; button.contentVerticalAlignment = UIControlContentVerticalAlignmentFill; 

You can also do this in the interface builder.

Answer 4

The easiest way to programmatically set a UIButton image in aspect mode:

Swift

 button.contentHorizontalAlignment = .fill button.contentVerticalAlignment = .fill button.imageView?.contentMode = .scaleAspectFit 

Objective-c

 button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentFill; button.contentVerticalAlignment = UIControlContentVerticalAlignmentFill; button.imageView.contentMode = UIViewContentModeScaleAspectFit; 

---

Note: You can change .scaleAspectFit (UIViewContentModeScaleAspectFit) to .scaleAspectFill (UIViewContentModeScaleAspectFill) to set the fill format

Answer 5

I had problems with the image not resizing proportionally, so I fixed it with cross-attachments.

 fooButton.contentEdgeInsets = UIEdgeInsetsMake(10, 15, 10, 15); 

Answer 6

This can now be done using the IB UIButton properties. The key is to set your image as a background, otherwise it will not work.

Answer 7

Turning around to Dave’s answer, you can set the contentMode imageView button all in IB without code using runtime attributes:

• 1 means UIViewContentModeScaleAspectFit ,
• 2 means UIViewContentModeScaleAspectFill .

Answer 8

If you just want to reduce the size of your button:

 yourButton.contentMode = UIViewContentModeScaleAspectFit; yourButton.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10); 

Answer 9

The cleanest solution is to use Auto Layout. I lowered the priority of content compression in my UIButton and set the image (not the background image) through Interface Builder. After that, I added a couple of restrictions that determine the size of my button (rather complicated in my case), and it worked like a charm.

Answer 10

I have a method that does this for me. the method takes uibutton and makes the image aspect suitable

 -(void)makeImageAspectFitForButton:(UIButton*)button{ button.imageView.contentMode=UIViewContentModeScaleAspectFit; button.contentHorizontalAlignment=UIControlContentHorizontalAlignmentFill; button.contentVerticalAlignment=UIControlContentVerticalAlignmentFill; } 

Answer 11

make sure you set the image to the Image property, but not to Background

Answer 12

1 - clear the default button text (important)

2 - set alignment as image

3 - set content mode as image

Answer 13

The background image can really be easily scaled. You just need to do something like this in a subclass of UIButton:

 - (CGRect)backgroundRectForBounds:(CGRect)bounds { // you'll need the original size of the image, you // can save it from setBackgroundImage:forControlState return CGRectFitToFillRect(__original_image_frame_size__, bounds); } // Utility function, can be saved elsewhere CGRect CGRectFitToFillRect( CGRect inRect, CGRect maxRect ) { CGFloat origRes = inRect.size.width / inRect.size.height; CGFloat newRes = maxRect.size.width / maxRect.size.height; CGRect retRect = maxRect; if (newRes < origRes) { retRect.size.width = inRect.size.width * maxRect.size.height / inRect.size.height; retRect.origin.x = roundf((maxRect.size.width - retRect.size.width) / 2); } else { retRect.size.height = inRect.size.height * maxRect.size.width / inRect.size.width; retRect.origin.y = roundf((maxRect.size.height - retRect.size.height) / 2); } return retRect; } 

Answer 14

For Xamarin.iOS (C #):

  myButton.VerticalAlignment = UIControlContentVerticalAlignment.Fill; myButton.HorizontalAlignment = UIControlContentHorizontalAlignment.Fill; myButton.ImageView.ContentMode = UIViewContentMode.ScaleAspectFit; 

Answer 15

Swift 5.0

  myButton2.contentMode = .scaleAspectFit myButton2.contentHorizontalAlignment = .fill myButton2.contentVerticalAlignment = .fill 

Answer 16

You just need to set the UIButton image content mode for the three events. -

 [cell.button setImage:[UIImage imageWithData:data] forState:UIControlStateNormal]; [cell.button setImage:[UIImage imageWithData:data] forState:UIControlStateHighlighted]; [cell.imgIcon setImage:[UIImage imageWithData:data] forState:UIControlStateSelected]; 

We have a code for three bcoz events when highlighting or selecting, if the button size is SQUARE and the image size is a rectangle, then it displays a square image during selection or selection.

I am sure this will work for you.