cssunity-game-engineunity-ui

Unity UI Builder: Square Image in Button


so I'm new to the Unity UI Builder and I have a problem when it comes to displaying a square Image (VisualElement with texture in background) in a button.
This is how the Element looks in the UI Builder.
This is how the image looks when I resize the button height (and what I want to achieve).
This is how the image looks when I resize the button width (and what I want to achieve).

As you can see the image gets streched and I want the image to be square all the time. I've already tried to implement some css-tricks I found when googling, but none of them work. Is there any way I can force this behaviour with css or other means? Thanks.


Solution

  • It will stretch the image to max possible without hidding any part of the image, and will keep the aspect ratio.

    If you know css, it is the same as background-size: contain;.

    The second option is the same as background-size: cover;.