Skip to content

Instantly share code, notes, and snippets.

@andersonbarutti

andersonbarutti/index.html

Forked from anonymous/index.html
Created March 25, 2015 21:53
Show Gist options
  • Save andersonbarutti/db2075dc619cda1c92a2 to your computer and use it in GitHub Desktop.
Save andersonbarutti/db2075dc619cda1c92a2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.box{
position: relative;
width: 100%; /* desired width */
}
.box:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url('http://placehold.it/500x410') center center no-repeat;
background-size: cover;
}
/* Other ratios */
.ratio2_1:before{
padding-top: 50%;
}
.ratio1_2:before{
padding-top: 200%;
}
.ratio4_3:before{
padding-top: 75%;
}
.ratio16_9:before{
padding-top: 56.25%;
}
</style>
</head>
<body>
<div class='box ratio4_3'>
<div class='content'></div>
</div>
<script id="jsbin-source-css" type="text/css">.box{
position: relative;
width: 100%; /* desired width */
}
.box:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url('http://placehold.it/500x410') center center no-repeat;
background-size: cover;
}
/* Other ratios */
.ratio2_1:before{
padding-top: 50%;
}
.ratio1_2:before{
padding-top: 200%;
}
.ratio4_3:before{
padding-top: 75%;
}
.ratio16_9:before{
padding-top: 56.25%;
}</script>
</body>
</html>
Raw
jsbin.zukefivoye.css
.box{
position: relative;
width: 100%; /* desired width */
}
.box:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url('http://placehold.it/500x410') center center no-repeat;
background-size: cover;
}
/* Other ratios */
.ratio2_1:before{
padding-top: 50%;
}
.ratio1_2:before{
padding-top: 200%;
}
.ratio4_3:before{
padding-top: 75%;
}
.ratio16_9:before{
padding-top: 56.25%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment