Skip to content

Instantly share code, notes, and snippets.

@dervondenbergen
Forked from Daniel-Hug/dabblet.css
Created January 13, 2015 15:55
Show Gist options
  • Save dervondenbergen/39e95e5649afadd0ed7b to your computer and use it in GitHub Desktop.
Save dervondenbergen/39e95e5649afadd0ed7b 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! :)
*/
div.lala {
width: 100%;
max-width: 380px;
}
div.stretchy-wrapper {
width: 100%;
padding-bottom: 14.473684211%; /* 16:9 */
position: relative;
background: #FFD505;
}
div.stretchy-wrapper > div {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
color: white;
font-size: 2em;
font-family: "Times New Roman";
font-weight: bold;
text-shadow: 2px 1px 0 black;
line-height: 1.8em;
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="lala"><div class="stretchy-wrapper"><div>INTERNI TOSCANI</div></div></div>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment