How to not stretch an image in UIButton

Question

I'm trying to create a custom UITableViewCell programmatically and one of the subviews of this cell is going to be a button with an image in it (a simple image of a magnifying glass). However, I want the button's image to be centered and scaled proportionately down to fit in the button and NOT to be stretched to fill the entire button. Below is my code where self refers to the custom UITableViewCell which I am placing the button into.

self.myButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[self.myButton setBackgroundImage:[UIImage imageNamed: @image_name_here"] forState:UIControlStateNormal];
self.myButton.frame = CGRectMake(...//something, something)
self.myButton.imageView.contentMode = UIViewContentModeCenter;
[self.contentView addSubview:self.mySearchHelpButton];

Right now the image stretches to fill the entire button rather than scaling proportionately so that it fits nicely.

I have also tried setting the contentMode to UIViewContentModeScaleAspectFill but this doesn't seem to change anything. In fact, none of the different contentModes seem to change anything.

score 68 · Accepted Answer · answered Jul 05 '12 at 14:46

68

Have you tried setImage instead of setBackgroundImage?

answered Jul 05 '12 at 14:46

Robot Woods

5,677
2
21
30

score 58 · Answer 2 · edited May 04 '16 at 05:56

58

Make sure the button is a Custom UIButton

Just using setImage: did not work for me on iOS9.

But it worked combined with myButton.imageView.contentMode = UIViewContentMode.ScaleAspectFit;

edited May 04 '16 at 05:56

Rutger Huijsmans

2,330
2
30
67

answered Jan 28 '16 at 23:54

Dimitris

13,480
17
74
94

2

Thanks! This works for me too, seems to me this attribute is not exposed in IB, so that we have to manually set it in code instead of from IB. On IB, there is only a content mode setting for the button itself, instead of its imageView. Correct me if I am wrong. – RainCast Nov 17 '16 at 20:39
2

You're spot on RainCast - the only way to set aspect fit for just the imageView seems to be programmatically. – Natalia Nov 29 '16 at 00:26

score 46 · Answer 3 · edited Apr 03 '20 at 14:01

46

In Swift...

button.imageView?.contentMode = . scaleAspectFit

edited Apr 03 '20 at 14:01

Ramin

335
4
14

answered Dec 10 '15 at 13:25

Blank

4,872
2
28
25

7

this is now `button.imageView?.contentMode = .scaleAspectFit` – Mr Heelis Oct 29 '17 at 09:30
3

keep in mind if `yourButton.translatesAutoresizingMaskIntoConstraints = false`then `.scaleAspectFit` will not be applied – cheesey Oct 25 '18 at 00:04

score 37 · Answer 4 · edited Jun 20 '20 at 09:12

37

Storyboard

Property image.

You must define specific property in Runtime Attributes of Identity inspector – imageView.contentMode, where you set value relatively to rawValue position of enum UIViewContentMode. 1 means scaleAspectFit.

And button's alignment, in Attributes inspector:

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 02 '17 at 20:25

dimpiax

12,093
5
62
45

thank you, your guide helps me a lot. is it possible for you to give me a brief explanation about what are you doing exactly? thank you very much – neda Derakhshesh Oct 15 '17 at 17:56
@nedaDerakhshesh could you be more specific? Thanks. – dimpiax Oct 15 '17 at 21:42
this way is working completely fine for button which I want to but what If I have a imageView then I need my picture clip to bounds and also no stretch with full image shown – neda Derakhshesh Oct 16 '17 at 19:09
@nedaDerakhshesh `clipToBounds` and `scaleAspectFit` are right for this. If it's not what you are talking – create a question and put a link here. But put question for images of expected result. – dimpiax Oct 16 '17 at 21:10
1

This is the rawValue of the scaleAspectFit enum (case scaleAspectFit = 1) – Nicolas Massart Nov 16 '17 at 16:49
4

This worked for me, but ONLY after I had unloaded and reloaded the image - ie delete the image name from the image / background image field, then add it again to reload. – Luke Smith Dec 15 '17 at 12:03
1

You saved my day! – Anibal Sanchez Jul 25 '18 at 17:52
out of all this worked for me... none of the other solutions workd – DragonFire Jul 12 '19 at 02:01
thank you, I had this issue when used several buttons in UIStackView, and it helped – Paul T. Sep 09 '19 at 12:22

Abhishek Jain · Answer 5 · 2018-10-27T08:03:50.417

10

Swift 4.2

myButton.imageView!.contentMode = .scaleAspectFit

Swift earlier version

myButton.imageView!.contentMode = UIViewContentMode.scaleAspectFit

edited Oct 27 '18 at 08:03

answered Oct 09 '17 at 15:18

Abhishek Jain

4,557
2
32
31

score 8 · Answer 6 · answered May 25 '19 at 17:29

8

Swift 4.X and 5.X

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

answered May 25 '19 at 17:29

J. Doe

12,159
9
60
114

score 3 · Answer 7 · answered Apr 14 '19 at 18:24

3

I think you guys are missing the obvious issue. The image is too large for the button and iOS then has to guess how you want to scale it. Make sure your images are the right size and you won't have this issue. Of course this is for static images and buttons that you know the size for up-front -- not dynamic content.

answered Apr 14 '19 at 18:24

Sherwin Zadeh

1,339
15
17

What would be the right size for a normal button? less than the width and height of the button itself? or how it is calculated? – tyoc213 Oct 27 '19 at 21:31
@tyoc213, the size should be exactly the point size of the button, width and height, that you want. For example if you want a 44pt x 100pt button, the image asset should be 44x100 pixels @ 1x, 88x200 pixels @ 2x, 132x300 pixels @ 3x.That way auto layout knows can use the image as the intrinsic size of the button. – Sherwin Zadeh Oct 29 '19 at 23:28

How to not stretch an image in UIButton

7 Answers7

Storyboard

Linked