Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


InVision ambassador ambassador
Chris

Prototype

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

This post is associated with a known feature request: [[problemTicketSubject]]. Let our Product team know that you’re interested in this feature.

Sign in to add your vote

Thanks for taking the time to share your feedback about making our product better. We’ve let our Product team know that you’re interested in this feature so they can factor that into their product strategy.

comments

sort by


Caitlin Cambron
InVision ambassador Caitlin Cambron , ambassador
Comment actions Permalink

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

0

Chris
InVision ambassador Chris , ambassador Edited
Comment actions Permalink

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

 

 

0

FAHANMI Ambrose Wuraoluwa
InVision ambassador FAHANMI Ambrose Wuraoluwa , ambassador
Comment actions Permalink

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,

  • First for the hero image, because you want it to scale within a fixed width and height, create a rectangle with your desired width and height.
  • Use that rectangle to create a mask with your hero image. (Make sure your hero image is above your rectangle while masking - just select both rectangle and the image, right click and select mask).
    The mask makes sure it scales within the specified size.
  • A group will be created from both components and you can change the group to a container (optional though).
  • Set the alignment of the group/container you created with respect to the artboard to left & right, bottom & top (picture attached).
  • Add the other components you want to stay pinned and at 100%, group them but instead set the alignment with respect to the artboard to bottom & center (picture attached).

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.

0

Chris
InVision ambassador Chris , ambassador
Comment actions Permalink

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

0

Chris
InVision ambassador Chris , ambassador
Comment actions Permalink

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

0

FAHANMI Ambrose Wuraoluwa
InVision ambassador FAHANMI Ambrose Wuraoluwa , ambassador
Comment actions Permalink

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.

0

join the conversation

to comment, sign up or sign in.