Companion site UI for displaying uploaded images for in-game UI stretches images

Steps to reproduce

  1. Create an image that is in portrait mode, for example width=400 height=800
  2. Put something in the image, like a circle:
    circle
  3. Go to Upload UI Image on the Crayta Companion Website: https://create.crayta.com/images/uploadui
  4. Upload the image you created.
  5. Go to My UI Images on the Crayta Companion Website: https://create.crayta.com/images/mine_ui

Expected result
The image is displayed in the same proportions as the uploaded image, as big as possible within the allotted real estate. E.g.: object-fit: scale-down.

Actual result
The image is stretched to fit the UI, looking like this:

Workaround
Option A)
Ignore. This does not affect the image itself, only the display on the web page.

Option B)
If you really want to see what the uploaded image looks like, inspect the image in your web browser, and change the CSS. There are many ways to do this, but for portrait example, disabling the width property for .RatioImageContainer .RatioImage:
Screen Shot 2020-08-16 at 16.46.33
For landscape mode, you’d disable height instead.
Or, for a better fix, see Example fix below.

Again, this is not a necessary workaround, since this is just for display.

Example fix
Change CSS of .RatioImageContainer .RatioImage:

  • Add object-fit: scale-down;

Result:

Hello slushdeath,

Thank you for the detailed report. I have alerted the team.