Locking Image Proportions Using Resize Action On Window Resize Interaction

Eric O'Brien shared this question 5 years ago
Answered

Fairly new to Prototyper and I'm toying around with some of the new responsive design functionality and can't figure out how to lock image proportions when resizing the image on window resize interaction. As a test, I created a new web prototype, dropped an image on the screen, selected the image, and added the event: On Window Resize do Image Resize (Calculated at 32 %of WindowWidth x 58 %of WindowHeight). As you can imagine, this allowed for breaking the image proportions, stretching/compressing the image depending on how the window was resized. What is the best approach to keeping the image proportions, in this scenario?

Comments (4)

photo
1

Don't worry, the responsive feature is fairly new as well. The best is that you check one of our prototypes, specially the one that comes as an example when you choose 'web' called 'responsive website'. In that prototype open the screen called 'Mobile layout' and select the purple image. Then go to the events tab and check the event defined there. What we did was to calculate the aspect ratio of the image (0.62 in this case) and apply that ratio to the calculation.

photo
1

Thanks for the quick reply, Victor. I'll check it out, now!

photo
1

The example given is great, Victor! However, it accounts for either horizontally or vertically (depending on the constant you select) resizing the window, not both. Any tips on how to accomplish that?

photo
1

But, if you do both, you can't keep the proportions of the image, do you? Can you show me an example of what you want to do?