CodePen

HTML

            
              <div class="container">
  <div class="subcontainer">
    <figure>
      <img  src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Tringa_glareola_-_Laem_Phak_Bia.jpg/640px-Tringa_glareola_-_Laem_Phak_Bia.jpg"/>
      <figcaption>This is dummy copy. It is not meant to be read.</figcaption>
    </figure>
  </div>
</div>


            
          
!

CSS

            
              html,body {
 width: 100%;
 height: 100%;
  padding:0;
  margin:0;
}
figure, figcaption {
  margin: 0;
  display: block;
  padding: 0;
}



.container {
  height: 100%;
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0; 
  padding-bottom: 50px;
  box-sizing: border-box;
}
.container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

.subcontainer {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  line-height: 1.231;
  text-align: left;
  max-width: 100%;
  
  *display: block;
  *margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
}
figure {
 line-height: 0; 
}

figcaption {
  padding: 8px 0 0;
  margin: 0;
  line-height: 1.231;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  text-align: center;
  display: block;
 
}
img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: inline-block;
  line-height: 0;
  
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              

 var container = $('.container'),
    newHeight,
    height;
$(window).resize(function() {
  var newHeight = container.height();
  // update max-height property only when height is changed
  if(newHeight !== height) {
    $('img').css('max-height', newHeight + 'px' );
    height = newHeight;
  }
}).triggerHandler('resize');
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................