Skip to content

Instantly share code, notes, and snippets.

@wizard04wsu
Last active September 10, 2017 19:32
Show Gist options
  • Save wizard04wsu/55210e62cd0ed5aaa490 to your computer and use it in GitHub Desktop.
Save wizard04wsu/55210e62cd0ed5aaa490 to your computer and use it in GitHub Desktop.
/* <div class="ratio-box"><div class="ratio-content">content</div></div> */
.ratio-box {
position:relative;
width:100%; /*set the width here*/
}
.ratio-box::before {
content:"";
display:block;
padding-top:75%; /*4:3 ratio*/
padding-top:56.25%; /*16:9 ratio*/
/*(padding percentages refer to the width of the containing block)*/
}
.ratio-content {
position:absolute;
top:0; right:0; bottom:0; left:0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment