index.html

<div class="responsive-container">
  <div class="img-container">
    <img src="http://placekitten.com/600/400">
  </div>
</div>

<div class="responsive-container">
  <div class="img-container">
    <img src="http://placekitten.com/840/300">
  </div>
</div>
<div class="responsive-container">
  <div class="img-container">
    <img src="http://placekitten.com/440/440">
  </div>
</div>

style.scss

* {
  @include box-sizing(border-box);
}

body {
  padding: 1em;
  background: #3498db;
}

.responsive-container {
  border: 1px solid #fff;
  margin: 30px;
  max-width: 500px;
  position: relative;
  background-color: #eaebec;
}

.img-container {
  font: 0/0 a;
  text-align: center;
  background: pink;
  overflow: hidden;
  &:before {
    padding-top: 66.66667%;
    content: '';
    width: 0;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    background: transparent;
  }
}

img {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

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

Vertically center image within responsive container

Forked from Trevan Hetzel's Pen Vertically center image within responsive container.

A Pen by Captain Anonymous on CodePen.

License.