Skip to content

Instantly share code, notes, and snippets.

@mr-stezz

mr-stezz/Centred-ratio-block.markdown

Created April 11, 2014 10:24
Show Gist options
  • Save mr-stezz/10456380 to your computer and use it in GitHub Desktop.
Save mr-stezz/10456380 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Mike Stezycki.
Raw
Centred-ratio-block.markdown
Raw
index.html
<section class="center-container">
<div class="center-object">
<div class="container">
<div class="ratio ratio--16x9">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" class="img">
</div>
</div>
</div>
</section>
Raw
style.scss
@import "compass";
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body { height: 100%; }
html {
font: normal 100%/1.5 sans-serif;
}
.center-container {
display: table;
width: 100%;
height: 100%;
}
.center-object {
display: table-cell;
vertical-align: middle;
}
.container {
max-width: (564px + 48px);
margin-right: auto;
margin-left: auto;
padding-left: 1.5em;
padding-right: 1.5em;
}
.ratio {
height: 0;
position: relative;
> img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #ddd;
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;
user-select: none;
pointer-events: none;
}
}
.ratio--16x9 {
padding-bottom: 56.25%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment