Menu icon Foundation
Orbit adapting img for different viewports.

Hi mates.

Im gonna start to re-design a clients restaurant website and i found this absolutely awesome site called www.marcogrill.com that have flooded me with inspiration.

One thing i would love to accomplish is their sliders flexible viewport scaling. The slider div adapts to the viewport and if i resize my browser window and hit update it will scale to fit. Always filling upp the whole screen when we first enter the site.

This is some awesomeness having some nice restaurant images always adapting to the viewers screen thus making it consistent. What would be the best approach accomplishing this with F5 and the Orbit slider? Much love and sry for any typos. Im a just a Swede :D

OrbitFoundation 5viewportfull screen

Hi mates.

Im gonna start to re-design a clients restaurant website and i found this absolutely awesome site called www.marcogrill.com that have flooded me with inspiration.

One thing i would love to accomplish is their sliders flexible viewport scaling. The slider div adapts to the viewport and if i resize my browser window and hit update it will scale to fit. Always filling upp the whole screen when we first enter the site.

This is some awesomeness having some nice restaurant images always adapting to the viewers screen thus making it consistent. What would be the best approach accomplishing this with F5 and the Orbit slider? Much love and sry for any typos. Im a just a Swede :D

Rafi Benkual almost 4 years ago

If you are trying to make the Orbit slider full width and keep the aspect ratio, this is how http://cdpn.io/ozfHG

Click edit pen to see code.

Here is an example of a full screen Orbit: http://codepen.io/avclark/pen/jzsdv