Window resize image

Hello, I’m a user who is using axure in Korea.
I was able to use the forum because I had some questions during the work.

For example, if the image size is 2560x1345, if the width is only greater than 2560 (the height is the same), I want to make the image grow proportionally.

Therefore, if the screen is 3000x1345, the image will be enlarged to 3000x1567, but the height shown on the screen will be only 1345.

Is there any way to solve this?
I’m done with the decreasing value of the width, but it’s not easy to increase it.
Please give us your opinions.

Thank you.

I’ll attach the file here.

The file represents an example of failure if the width value is greater than 2560. (The image will only grow horizontally with the ratio broken)

window resize image.rp (2.1 MB)

If you want a background image to always fill the window dimensions without distortion, the easiest solution is to set the Page Fill to an Image, with the “Stretch to Cover” option. (Find this in the STYLE tab for a blank page.)

I updated your .rp file to show this in Page 2.

If you need to do this for something other than a background image, or in addition to a background image (e.g., some kind of overlay image) you can determine if the image needs to fit the width of the window or the height of the window by comparing the original image ratio (in your case, 2560 / 1345 = 1.90335 (rounded)) to to the browser’s window ratio (in Axure math expression, this is [[Window.width / Window.height]] ).

See Page 3 and Page 4 for a suggested solution. (The only difference is the size of the image–I had to shrink the image just to test this because I don’t have a monitor taller than 1345 px. Page 3 has this smaller image and Page 4 has original image.) I also created a few global variables to make the calculations easier and show the current dimensions of the window and image. You can open the Console panel to view these variables when you Preview the prototype (look in the upper right of the Axure frame in your web browser.) The critical global variables are:

  • ImageRatio
    • in the image’s Loaded event, I set ImageRatio to: [[This.width / This.height]]
  • WindowRatio
    • In the Window Resized event, I set WindowRatio to: [[Window.width / Window.height]]

I use this logic to scale the image:

  • If WindowRatio is greater than or equal to ImageRatio, fit to width.

    • In the Window Resized event, I created a conditional case with logic: "If value of WindowRatio is greater than or equals value of ImageRatio, set the image size to:
      [[Window.width]] x [[Window.width / ImageRatio]]
  • Else if WindowRatio is less than than ImageRatio, fit to height.

    • In the Window Resized event, a second “Else If” case sets the image size to:
      [[Window.height * ImageRatio]] x [[Window.height]]

window resize image.rp (8.2 MB)

1 Like

Thank you for your kind answer.
If the window is stretched, it is fully applied.

However, the function that decreases as in page 1 does not work in page 3 and 4.
I’ll think about it based on what you told me and ask you if I don’t know.

Thank you again.

@mbc66

When increasing or decreasing the image, will the standard be changed to the center instead of the top left?

i found the option but i didn’t work

image