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.

Answer 1

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