Skip to content

Instantly share code, notes, and snippets.

/Vertically-center-image-within-responsive-container.markdown

Created November 5, 2014 03:29
Show Gist options
  • Save anonymous/2f01ccd79260e763489e to your computer and use it in GitHub Desktop.
Save anonymous/2f01ccd79260e763489e to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Captain Anonymous.
Raw
index.html
<div class="responsive-container">
<div class="img-container">
<img src="http://placekitten.com/2640/400">
</div>
</div>
Raw
style.scss
@import "compass/css3";
* {
@include box-sizing(border-box);
}
body {
padding: 1em;
background: #3498db;
}
.responsive-container {
width: 500px;
position: relative;
background-color: #eaebec;
}
.img-container:before {
padding-top: 66.66667%;
content: '';
width: 0;
height: 100%;
background: none;
display: inline-block;
vertical-align: middle;
}
.img-container {
text-align: center;
background: pink;
}
img {
display: inline-block;
vertical-align: middle;
max-height: 100%;
max-width: 100%;
position: relative;
top: 50%;
transform: translateY(-50%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment