horizontally & vertically centered Responsive image - html

Question

I am trying to get an image horizontally and vertically centered within a div of variable height and width.
So far, so good.(See jsfiddle links below)
Now the catch is the image should also be responsive and adjust if either the height and/or width of the container is smaller than the images height or width.
After researching, going through all the different "solutions" out there and fiddling for a solution, I was unable to find the perfect one, however two came close:
1.) This first one does everything I need except when the window width is smaller than the image width, the image is no longer horizontally aligned:
http://jsfiddle.net/me2loveit2/ejbLp/8/
HTML
<div class="overlay">
<div class="helper"></div>
<img src="http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable">
</div>
CSS
.helper {
height:50%;
width:100%;
margin-bottom:-240px;
min-height: 240px;
}
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
}
img {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
display: block;
}
2.) This second example keeps everything aligned, but the image does not scale down when the height is less than the image height:
http://jsfiddle.net/me2loveit2/ejbLp/9/
HTML
<div id="outer">
<div id="container">
<img src="http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable">
</div>
</div>
CSS
#outer {
height:100%;
width:100%;
display:table;
position:fixed;
top:0px;
left:0px;
background-color: rgba(0, 0, 0, 0.5);
}
#container {
vertical-align:middle;
display:table-cell;
max-width: 100%;
max-height: 100%;
}
img {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
display:block;
}

Answer 1

I have attempted this in the past and the only non-JS solution I've come up with (which is frowned upon, by the way) is this:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
display: table;
}
.container {
display: table-cell;
vertical-align: middle;
border: 1px solid #f00;
}
.container > div {
width: 100%;
height: 100%;
margin: 0 auto;
border: 1px solid #00f;
max-width: 550px;
max-height: 480px;
background: url("http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable") 50% 50% no-repeat;
background-size: contain;
}
<div class="container"><div></div></div>
http://jsfiddle.net/pYzBf/1/
Set the background color of the div to black to see the scaling without the image edges. I used those dimensions so you can test it by resizing the frame.