Skip to content

Instantly share code, notes, and snippets.

@asafge

asafge/aspect_ratio.html

Created April 9, 2014 09:25
Show Gist options
  • Save asafge/10246656 to your computer and use it in GitHub Desktop.
Save asafge/10246656 to your computer and use it in GitHub Desktop.
Download ZIP
An example of setting a constant aspect ratio for an HTML element.
Raw
aspect_ratio.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.wrap{
position: relative;
width: 30%; /* Width */
float: left;
margin: 5px;
}
.wrap:before{
content: "";
display: block;
padding-top: 80%; /* 5:4 ratio (since 80% = 4/5) */
}
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: red;
}
</style>
</head>
<body>
<div class='wrap'>
<div class='content'>Aspect ratio of 5:4</div>
</div>
<div class='wrap'>
<div class='content'>Aspect ratio of 5:4</div>
</div>
<div class='wrap'>
<div class='content'>Aspect ratio of 5:4</div>
</div>
<div class='wrap'>
<div class='content'>Aspect ratio of 5:4</div>
</div>
<div class='wrap'>
<div class='content'>Aspect ratio of 5:4</div>
</div>
<div class='wrap'>
<div class='content'>Aspect ratio of 5:4</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment