Centering/Scaling Single Image to 100% without cropping

newbie-question

#1

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!


#2

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.


#3

You can use the Window Resized event to do things when the window is resized, and this is also triggered when the page initially loads. You can use the window dimensions to set the size of your image, as you’ve done, and your logic is close, but can be improved to ensure the image is always sized to the appropriate dimension. In the demo below, I use 3 cases to handle the window dimensions and size an image placeholder accordingly, then a fourth to move the image to the center of the window.

The logic goes like this:

  1. IF the window is greater than 1920x1080 px, set the size of the image to 1920x1080
  2. ELSE IF the window ratio (calculated by [[(Window.width / Window.height)]] is less than or equals [[16/9]], set size of image to [[Window.width]] x [[Window.width*9/16]]
  3. ELSE IF window ratio is greater than 16/9, set size of image to [[Window.height*16/9]] x [[Window.height]]
  4. IF true (always) Move the image to [[(Window.width/2) - (Target.width/2)]] x [[(Window.height/2) - (Target.height/2)]]

The Wait actions seemed to reduce the chance of scrollbars showing up, but if browser window resized quickly (or perhaps just enough) then a browser scrollbar might show. I also used the Resized event of the image to show the size of the window and the image to help test this out.

shrink to fit.rp (46.8 KB)