Skip to content

Instantly share code, notes, and snippets.

@fotock

fotock/index.html

Last active December 29, 2016 04:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fotock/0ee58cc067af3d0f92e0d412ae055d7c to your computer and use it in GitHub Desktop.
Save fotock/0ee58cc067af3d0f92e0d412ae055d7c to your computer and use it in GitHub Desktop.
Download ZIP
Aspect Ratio CSS
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.ratio-1-1,.ratio-2-1,.ratio-3-2,.ratio-4-3,.ratio-3-4,.ratio-16-9 {position:relative;overflow:hidden;}
.ratio-1-1:before,.ratio-2-1:before,.ratio-3-2:before,.ratio-4-3:before,.ratio-3-4:before,.ratio-16-9:before {display:block;content:"";width:100%;}
.ratio-1-1>.content,.ratio-2-1>.content,.ratio-3-2>.content,.ratio-4-3>.content,.ratio-3-4>.content,.ratio-16-9>.content {position: absolute;top:0;left:0;right:0;bottom:0;}
.ratio-1-1:before {padding-top:100%;}
.ratio-2-1:before {padding-top:50%;}
.ratio-3-2:before {padding-top:66.67%;}
.ratio-4-3:before {padding-top:75%;}
.ratio-3-4:before {padding-top:133.33%;}
.ratio-16-9:before {padding-top:56.25%;}
/* demo */
[class^="ratio-"] {width:30%;background:#ddd; margin:1em;}
span {position:absolute;top:50%;left:50%;}
</style>
<body>
<div class="ratio-1-1"><div class="content"><span>1:1</span></div></div>
<div class="ratio-2-1"><div class="content"><span>2:1</span></div></div>
<div class="ratio-3-2"><div class="content"><span>3:2</span></div></div>
<div class="ratio-4-3"><div class="content"><span>4:3</span></div></div>
<div class="ratio-3-4"><div class="content"><span>3:4</span></div></div>
<div class="ratio-16-9"><div class="content"><span>16:9</span></div></div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment