Centering/Scaling Single Image to 100% without cropping



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?



As far as I’m aware there’s no way to scale images to browser resize but you can use adaptive views to flip between different image sizes based on the viewport size. You can get as fine-grained as you like with that (i.e. have images in 10 pixel increments if you want).

You can also ensure your mockup is centred by clicking on the page canvas itself and going to the style tab, then selecting centred.