Skip to content

Instantly share code, notes, and snippets.

@viktorViktor
Last active September 6, 2017 10:13
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
jQuery 16:9 (Set container to a fixed but dynamic-width 16:9 ratio)
<div class="sixteen-nine"></div>
// set aspect ratio to 16:9
var sixteenNine = function(){
var width = $('.sixteen-nine').width();
$('.sixteen-nine').css('height',width * 0.5625 + 'px')
var height = $('.sixteen-nine').height();
// print out values
$('.sixteen-nine').html(width + " x " + height);
};
// on page load
$(document).ready(sixteenNine);
// on window resize
$(window).resize(sixteenNine);
// no need for css, but it's prettier this way!
html, body {
margin: 0;
height: 100%;
width: 100%
}
.style {
margin: 0;
padding: 10px;
color: white;
-webkit-font-smoothing: antialiased;
font-family: "Helvetica Neue", sans-serif;
font-weight: 100;
background: #f7464a;
font-size: 100px;
@media all and (max-width: 630px) {
font-size: 72px;
}
text-align: center;
max-width: 100%;
width: 100%;
}
.sixteen-nine {
@extend .style;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment