How to avoid distort and stretch image in Custom UIButton while using vector image set?

Question

Below is my storyboard, I had quite a lot of constrains to make those four buttons fit into the screen nicely. However, after I put the images into the buttons and check the storyboard preview, all images are distorted. I try to adjust (had tried all of the options) the view mode at attribute inspector panel but seems no effect at all.

One more thing, I am using PDF as vector type image set, not regular .png file I am wonder if that matters? Should I change the way vector image displayed inside UIButton programaticly?

The verctor image size was 500px*500px. I resize the image into 50px*50px after @orkenstein 's reminader, xcode may not be able to handle oversized vector image that well. The image appear inside button as it is exactly 50px*50px and lost its ability to scale. Also as he sugested I should but the vector image inside an UIImageView and after my test, it works perfectly fine in an UIImageView.

enter image description here

Try `Aspect Fit` and `Aspect Fill`. This will preserve original aspect ratio. — orkenstein, Feb 14 '15 at 15:15
What do you mean? I put my image inside `Images.xcassets`. Set the view mode at attribute inspector panel while button selected. — XY L, Feb 14 '15 at 15:22
You set your vector images as `UIButton`'s `background image` or `image`? — orkenstein, Feb 14 '15 at 15:24
I also tried both either set the image as `Image` OR `Background` OR `Image AND Background`, NO effect. Is that because I am using vector image? — XY L, Feb 14 '15 at 15:25
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/70918/discussion-between-orkenstein-and-x-li). — orkenstein, Feb 14 '15 at 15:26

score 18 · Accepted Answer · edited Aug 10 '17 at 20:09

18

Setting the contentMode on the button itself doesn't work for me, but setting it on the button's imageView does. From this Stackoverflow answer:

button.imageView?.contentMode = .scaleAspectFit

edited Aug 10 '17 at 20:09

User

31,811
40
131
232

answered Jun 16 '16 at 06:23

user2067021

4,399
37
44

How to avoid distort and stretch image in Custom UIButton while using vector image set?

1 Answers1