Hi, I have a very simple but specific requirement for all prototypes we will make on your system, but I’m struggling to figure out how to do it.
We’re a html5 game dev co and I just want to show full game art for each screen. Games are always 1920x1080. I need to always be able to show this full 16:9 image in its entirety regardless of browser size.
I have tried to resize width and height like this:
width: [[Window.height*(1920/1080)]]
height: [[Window.height]]
This works ok, but as soon as I drag the browser to a ratio smaller than 16:9 then it will crop out the right size of the image.
Obviously the same happens in reverse:
width: [[Window.width]]
height: [[Window.width*(1080/1920)]]
This time we lose part of the bottom of the image as we scale to a window that is not tall enough vertically.
Can you suggest a solution where my image is always visible in it’s entirely regardless of browser dimensions, and even better, centered in the middle of the screen?
Thanks!