@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.