I knew how to do this with a background image, but was really struggling with this earlier today until I found this CodePen.
@import "compass/css3";
body, html {
width: 100%;
height: 100%;
@include box-sizing(border-box);
}
body {
padding: 1em;
background: #3498db;
}
section {
width: 50%;
height: 15em;
margin: 0 auto;
overflow: hidden;
background: #2980b9;
@include border-radius(.5em);
img {
position: relative;
max-height: 100%;
left: 50%;
@include translateX(-50%);
@media(min-width: 800px) {
top: 50%;
left: 0;
max-height: none;
width: 100%;
@include translateY(-50%);
}
}
}
See the Pen Vertically center image within responsive container by Trevan Hetzel (@trevanhetzel) on CodePen.