Skip to content

Instantly share code, notes, and snippets.

@ayozebarrera

ayozebarrera/ratio.css

Created October 22, 2014 09:50
Show Gist options
  • Save ayozebarrera/53ac50c9a37c99910891 to your computer and use it in GitHub Desktop.
Save ayozebarrera/53ac50c9a37c99910891 to your computer and use it in GitHub Desktop.
Download ZIP
How maintain 16:9 aspect ratio
Raw
ratio.css
.ratio{
display: block;
height: 0; /* we have padding-bottom instead height (content+padding-bottom)*/
padding-bottom: 56.25%; /*16:9 ratio -> (9 ÷ 16) × 100 = 56.25 */
overflow: hidden;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment