Skip to content

Instantly share code, notes, and snippets.

@steven-prybylynskyi
Created February 13, 2015 14:47
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 steven-prybylynskyi/e8509e4e135f0a824d47 to your computer and use it in GitHub Desktop.
Save steven-prybylynskyi/e8509e4e135f0a824d47 to your computer and use it in GitHub Desktop.
Pure CSS aspect ratio with no spacer images or js! :)
/*
* Pure CSS aspect ratio with no spacer images or js! :)
*/
body {
width: 36%;
margin: 8px auto;
}
img {
height: 100%;
}
div.stretchy-wrapper {
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
position: relative;
background: blue;
}
div.stretchy-wrapper > div {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
color: white;
font-size: 24px;
text-align: center;
}
/* Other aspect ratios to try:
* 56.25% = 16:9
* 75% = 4:3
* 66.66% = 3:2
* 62.5% = 8:5
*/
<div class="stretchy-wrapper"><div><img src="http://placehold.it/200x300"</div></div>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment