I need to produce a desktop prototype which shows the hero image scaling (image scaling within a fixed height container) to fill the browser width, but everything else on the prototype staying at it's original size and not scaling and staying pinned on the vertical axis.
Is that possible?
Thanks
Chris
comments
Sort by
Hey Chris!
I'm happy to help you with this. What program are you using to create your prototype? If you could post an example of what you're trying to accomplish, that would help too.
Cheers,
Caitlin
Hi Caitlin
Thanks for the offer of help!
This is a random sample I found: https://www.midwich.com/ When the site scales to a large HD web size, the hero image fills the browser width and scales within a fixed height. You'll notice the boxes below the hero stay pinned to the centre and don't scale any bigger in size.
I have attached a partial screen shot from my file (which is a Sketch file I am opening through Invision Studio). I need to be able to show a prototype that shows the large images fill the width of the browser and scale as the browser window is made larger, but all other components to stay pinned to the centre of the page and at 100%.
Hope that makes sense.
Many thanks
Chris
Hi Chris,
As a follow up to Caitlin's offer of help, if I'm correct, you're trying to create a responsive page such that the hero image has a proportionate size and fills the browser width any time the browser is resized. The trick is in toggling the alignment of the elements with respect to the artboard.
To achieve this,
The mask makes sure it scales within the specified size.
You can repeat the process for the first hero image if you have another image you want to fill the width and so on.
I hope this works fine. Just in case, the studio file I used to test is attached here.
Regards,
Wurah.
Hi Wurah
Thanks so much for this—Invision Studio is new to me, but this makes great sense.
I'll let you know how I got on.
Thanks again for your help
Chris
Hi Wurah
Just had a look at your test file. Do you know if there's a way to keep the grey boxes at a fixed size and centred to the page (rather than scaling with the hero image) whilst the hero image scales as you have it? This only to demonstrate how they would act on desktop, I appreciate they would scale/stack no tablet and mobile.
Thanks
Chris
Hi Chris,
There's a way to keep the grey boxes at a fixed size, just select each grey box and uncheck the maintain aspect ratio icon (picture attached).
Yes, from my little experience and knowledge, the way I understand responsiveness is always to start from the smallest iteration, so if you want it to scale on mobile and tablet, you'll start the design from a mobile or desktop then scale up.
I hope this helps.
Regards,
Wurah.