CodePen

HTML

            
              
  <div class="img-contain">
    <div class="img-shiv">
      <img src="http://placehold.it/550x350" />
    </div>
</div>

  <div class="img-contain">
    <div class="img-shiv">
      <img src="http://placehold.it/350x550" />
    </div>
</div>

<p>Based on: <a href="http://jsfiddle.net/thefrontender/KQ36Z/2/">http://jsfiddle.net/thefrontender/KQ36Z/2/</a></p>

            
          
!
via HTML Inspector

CSS

            
              .img-contain {
  position: relative;
  text-align: center;
  width: 100%;
  height: 0;
  padding-bottom: 75%;
  background-color: #000;
  margin-bottom: 20px;
}

img {
  max-width: 100%;
  height: auto;
  max-height: 100%;
  vertical-align: middle;
}

.img-shiv {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 0;
}

.img-shiv:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................