UIButton won't go to Aspect Fit in iPhone

Question

I have a couple UIButtons, and in IB they're set to Aspect Fit, but for some reason they're always stretching. Is there something else you have to set? I tried all the different view modes and none of them work, they all stretch.

@Werner Altesischer's answer is the right one. Make the appropriate changes. — Harshit Gupta, Jan 19 '14 at 21:01
@marty Are you setting background image or image? background image does not support it, only image. — Juan Boero, Aug 17 '15 at 22:25

score 243 · Answer 1 · edited Jan 08 '14 at 03:19

243

The solution is to set the contentMode on the imageView property of the UIButton. The UIButton has to be created with custom type for this to work I believe (otherwise nil is returned for this property).

edited Jan 08 '14 at 03:19

Pang

9,564
146
81
122

answered Oct 22 '10 at 10:10

Werner Altewischer

10,080
4
53
60

71

This worked for me: `[button.imageView setContentMode:UIViewContentModeScaleAspectFit];` – ayreguitar Sep 08 '11 at 09:04
2

This works for me also but if I set adjustsImageWhenHighlighted=YES, the image is stretched again when I tap on the button. – cduck Feb 01 '12 at 00:06
Set adjustImageWhenHighlighted to NO and supply an image yourself for the highlighted state instead – Werner Altewischer Feb 28 '12 at 15:20
1

The stretching in adjustsImage has been eliminated in iOS 6. – Ben Flynn Aug 12 '13 at 19:38
3

In iOS 8, this actually doesn't work for me. The original answer (with placing an imageView behind a transparent button) works best. – user1416564 Sep 30 '15 at 12:57
in SWIFT: `button.imageView.contentMode = UIViewContentMode.ScaleAspectFit` – drpawelo Mar 23 '16 at 12:49
7

in Swift du jour: `button.imageView!.contentMode = UIViewContentMode.scaleAspectFit` – Nestor Sep 01 '17 at 09:26
1

Is this possible within the storyboard designer, or must it be set in code? – Damn Vegetables Oct 21 '17 at 17:09
Also, on iOS 11+, the content mode has to be set before the image. Otherwise it will only get its good shape after taping on it. – Tulleb Apr 16 '19 at 13:53
What might cause an image set as the image for a button to appear cut off? Text appears fine if put instead of image – Jun 17 '19 at 02:29

score 63 · Answer 2 · edited Dec 21 '17 at 17:02

63

This method worked for me very well.:

In Xib select the button and set user defined runtime attributes:

Key path: self.imageView.contentMode
Type: Number
Value: 1

Click here to see more clearly the solution

We use number because you cant use enum there. But the UIViewContentModeScaleAspectFit is equal to 1.

edited Dec 21 '17 at 17:02

byJeevan

3,728
3
37
60

answered Mar 08 '16 at 09:35

István Stefánovics

639
5
4

2

This also updated the image in the interface builder during design time. Great solution. – George Filippakos May 19 '17 at 21:38
Great solution, few code and works like a charm , the enum is based on content mode list items. – Kross Sep 26 '17 at 18:51
You can also add an extension to make it a bit easier: `extension UIButton { @IBInspectable var imageContentMode: Int { get {return imageView?.contentMode.rawValue ?? 0} set {imageView?.contentMode = UIViewContentMode(rawValue: newValue) ?? .scaleAspectFit} } }` – Yonat Dec 12 '17 at 07:10
Without 'self' `imageView.contentMode` worked for me! – byJeevan Dec 21 '17 at 17:10

score 46 · Accepted Answer · edited May 23 '17 at 12:02

46

I've had that problem before. I solved it by putting my image in a UIImageView, where contentMode settings actually work, and putting a transparent custom UIButton over top of that.

EDIT: This answer is obsolete. See @Werner Altewischer's answer for the correct answer in modern versions of iOS.

edited May 23 '17 at 12:02

Community

1
1

answered Aug 11 '10 at 17:02

Dan Ray

21,623
6
63
87

Yeah tried that, but now can't get the button to refit to the image – marty Aug 11 '10 at 21:34
How do you manage button states with this technique? Seems like responding to user interaction like "highlighted" would be a nightmare. – SooDesuNe Oct 24 '12 at 02:30
3

This might have been the right way to do this 2.5 years ago when this question was answered, but now you can edit the UIButton's internal ImageView and set the the content mode there. See the answer by @Werner Altewischer – Steve Haley Apr 05 '13 at 11:56

score 24 · Answer 4 · answered Feb 10 '17 at 22:42

If you are doing this in Interface Builder, you can use the Runtime attributes inspector to set this directly without any code.

Set your Key Path on the button to be "imageView.contentMode" with a type of "Number" and a value of "1" (or whichever mode you would like).

score 17 · Answer 5 · answered Sep 11 '16 at 20:30

Use button's imageView for contentMode. Not directly on the button itself.

homeButton.imageView.contentMode = UIViewContentModeScaleAspectFit;
homeButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentFill;
homeButton.contentVerticalAlignment = UIControlContentVerticalAlignmentFill;
[homeButton setImage:[UIImage imageNamed:kPNGLogo] forState:UIControlStateNormal];

score 6 · Answer 6 · answered Nov 04 '13 at 01:33

I had this problem a while back. The issue I had was i was trying to apply this effect to the background UIButton which is limited and therefore means you cannot adjust it as easy.

The trick is to set it as just an image then apply @ayreguitar's technique and that should fix it!

UIButton *myButton = [UIButton buttonWithType:UIButtonTypeCustom];
[myButton setContentMode:UIViewContentModeScaleAspectFill];
[myButton setImage:@"myImage.png" forState:UIControlStateNormal];

score 6 · Answer 7 · answered Dec 14 '10 at 13:17

If you put the image in an UIImageView behind the button, you'll loose the built-in functionality of the UIButton class, such as adjustsImageWhenHighlighted and adjustsImageWhenDisabled, and of course the ability to set different images for different states (without the hazzle of doing this yourself).

If we want to have an image unstreched for all control states, one approuch is to get the image using imageWithCGImage:scale:orientation, as in the following method:

- (UIImage *) getScaledImage:(UIImage *)img insideButton:(UIButton *)btn {

    // Check which dimension (width or height) to pay respect to and
    // calculate the scale factor
    CGFloat imgRatio = img.size.width / img.size.height, 
            btnRatio = btn.frame.size.width / btn.frame.size.height,
            scaleFactor = (imgRatio > btnRatio 
                           ? img.size.width / btn.frame.size.width
                           : img.size.height / btn.frame.size.height;

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

To implement this we would write:

UIImage *scaledImg = [self getScaledImage:myBtnImg insideButton:myBtn];
[myBtn setImage:scaledImg forState:UIControlStateNormal];

This should prevent the image from stretching in all control states. It worked for me, but let me know if it doesn't!

NOTE: Here we are addressing a problem relating to UIButton, but the insideButton: might as well be insideView:, or whatever one would like to fit the image into.

score 4 · Answer 8 · answered Mar 19 '15 at 07:26

4

This worked for me

[button.imageView setContentMode:UIViewContentModeScaleAspectFit];

Thanks to @ayreguitar for his comment

answered Mar 19 '15 at 07:26

Karan Alangat

2,154
4
25
56

score 4 · Answer 9 · answered Nov 29 '15 at 16:04

4

Here's an alternative answer in swift:

myButton.imageView?.contentMode = .ScaleAspectFit

answered Nov 29 '15 at 16:04

João Neves

944
1
13
18

score 4 · Answer 10 · answered Oct 18 '16 at 22:51

Combining together a few different answers into one solution-- create a button with a custom type, set the button's imageView contentMode property, and set the image for the button (not the background image, which will still scale to fill).

//Objective-C:
UIImage *image = [UIImage imageNamed:"myImageName.png"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:image forState:UIControlStateNormal];
button.imageView.contentMode = UIViewContentModeScaleAspectFit;

//Swift:
let image = UIImage(named: "myImageName.png")
let button = UIButton(type: .custom)
button.imageView?.contentMode = .scaleAspectFit
button.setImage(image, for: .normal)

João Nunes · Answer 11 · 2019-05-04T20:48:30.140

3

ios 12. You need to add also the content Alignment

class FitButton: UIButton {

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)


    }

    override func layoutSubviews() {
        self.imageView?.contentMode = .scaleAspectFill
        self.contentHorizontalAlignment = .fill
        self.contentVerticalAlignment = .fill
        super.layoutSubviews()


    }

}

edited May 04 '19 at 20:48

answered Feb 10 '15 at 14:53

João Nunes

3,751
31
32

Supposed to be aspect FIT not FILL – PiotrDomo Apr 20 '22 at 06:50

score 3 · Answer 12 · answered Mar 18 '16 at 08:06

3

btn.imageView.contentMode = UIViewContentModeScaleAspectFit;

answered Mar 18 '16 at 08:06

selaband

71
9

While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. - [From review](https://stackoverflow.com/review/low-quality-posts/11679579) – Ferrybig Mar 18 '16 at 09:52

score 2 · Answer 13 · edited May 23 '17 at 12:34

This answer is based on @WernerAltewischer's answer.

To avoid having connect my button to an IBOutlet to execute the code on it, I subclassed UIButton's class:

// .h
@interface UIButtonWithImageAspectFit : UIButton
@end

// .m
@implementation UIButtonWithImageAspectFit

- (void) awakeFromNib {
    [self.imageView setContentMode:UIViewContentModeScaleAspectFit];
}

@end

Now create a custom button in your xib, and set its image (not the background image):

UIButtonWithImageAspectFit: create and set image

Then, set its class:

UIButtonWithImageAspectFit: set custom class

You're done!
Instead of
UIButton without image aspect fit
your button's image aspect fit is now as expected:
UIButton with image aspect fit

score 1 · Answer 14 · answered Jun 07 '12 at 07:45

1

I had problems with the image not resizing proportionately so the way I fixed it was using edge insets.

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

answered Jun 07 '12 at 07:45

ninjaneer

6,951
8
60
104

score 1 · Answer 15 · answered Dec 24 '15 at 02:53

1

Changing UIButton.imageView.contentMode does not worked for me.
I solved the problem by setting the image to 'Background' property.
You can add ratio constraint if you need

answered Dec 24 '15 at 02:53

Soohwan Park

625
4
11

score 1 · Answer 16 · edited Oct 11 '12 at 07:14

UIView content modes apply to the corresponding CALayer's "content". This works for UIImageViews because they set the CALayer content to the corresponding CGImage.

drawRect: ultimately renders to the layer content.

A custom UIButton (as far as I know) has no content (the rounded-rect style buttons might be rendered using content). The button has subviews: the background UIImageView, the image UIImageView, and the title UILabel. Setting the contentMode on the subviews may do what you want, but messing around with the UIButton view hierarchy is a bit of a no-no.

score 1 · Answer 17 · answered May 17 '16 at 16:57

This overlaps many of the other answers, but the solution for me was to

set the contentMode of the UIImageView for the button to .ScaleAspectFit – which can either be done in the ”User Defined Runtime Attributes” in Interface Builder (ie. self.imageView.contentMode, Number, 1) or in a UIButton subclass;
disable ”Autoresize Subviews”;
set ”Edge” to ”Image” and appropriate ”Top” and ”Bottom” values for ”Inset” (which might only be needed if you, like me, used a PDF as image).

score 0 · Answer 18 · edited Jul 17 '12 at 15:46

0

[button sizeToFit] worked for me.

edited Jul 17 '12 at 15:46

Rob Hruska

118,520
32
167
192

answered Jul 17 '12 at 15:42

Hila

9
1

score 0 · Answer 19 · answered Aug 09 '16 at 13:38

Similar to @Guillaume, I have created a subclass of UIButton as a Swift-File. Then set my custom class in the Interface Builder:

.

And here the Swift file:

import UIKit

class TRAspectButton : UIButton {
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.imageView?.contentMode = .ScaleAspectFit
    }
}

score 0 · Answer 20 · answered Dec 20 '10 at 04:47

0

You can use imageWithCGImage as shown above (but without the missing parentheses).

Also... millions of non-4.0 phones won't work with that code at all.

answered Dec 20 '10 at 04:47

Alice

141
1
5

score -1 · Answer 21 · answered Aug 11 '10 at 17:03

-1

I had the same issue, but I couldn't get it to work (perhaps it's a bug with the SDK).

Eventually, as a workaround, I placed a UIImageView behind my button and set the options I wanted on that, then simply placed a blank UIButton on top of it.

answered Aug 11 '10 at 17:03

Anshu Chimala

2,800
2
23
22

7

Is there an echo in here? ;-) – Dan Ray Aug 11 '10 at 17:56

UIButton won't go to Aspect Fit in iPhone

21 Answers21

Linked