Vertically Center Responsive Image

Question

I am wondering if there is a simple way to vertically center a responsive image.

Please refer to the following jsFiddle: http://jsfiddle.net/persianturtle/yawTb/1/

Answer 1

The solution you've got works for old browsers but in the near future (right now has around the 80% of the browser support) you can do this, a much simpler and elegant solution:

.container img{
  width: 100%;
  height: auto;
}
@supports(object-fit: cover){
    .container img{
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
}