Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
LESS mixin for Viewport Ratio Contrains
/* This version is adapted from http://stackoverflow.com/a/24894523/382536 to
* constrain width to 100% height instead. See blog post for further reading:
* https://www.jasonnathan.com/article/gsap/building-a-zoomable-user-interface-with-meteorjs-gsap
*
* param {Number} @x - width
* param {Number} @y height
*/
.viewportRatio(@x, @y) {
@height:100vh;
@width: (@x * 100vh / @y);
@max-height:( @y / @x * 100vw);
@max-width: 100vw;
}
//usage
#constrainContainer{
/** or body, aspect ratio is 3:4 */
.viewportRatio(3, 4);
height: @height;
width: @width;
max-height: @max-height;
max-width: @max-width;
position:relative;
}
.Page{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
#contact{
/* 1/3 of total area*/
transform:scale(.3333);
}
#works{
/* 1/6 of total area */
transform:scale(.1111);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.