Responsive image inside vertical centered responsive container - html

Question

I'm trying to create a responsive vertically centered lightbox, supporting different image sizes and controls relativ positioned to the image without the use of javascript.
I got it working in Safari, but unfortunately the image doesn't scale heightwise in Firefox and Chrome where it overflows its parent.
Here's the JSFiddle
Here is my code:
.overlay {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: rgba(0,0,0,.75);
text-align:center;
font-size:0;
}
.overlay:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.container {
display:inline-block;
vertical-align:middle;
position:relative;
box-shadow:0 0 5px rgba(0,0,0,.5);
font-size:1rem;
max-width:80%;
max-height:80%;
}
.container img {
vertical-align: bottom;
max-width:100%;
max-height:100%;
}
.container .caption {
position:absolute;
bottom:0;
width:100%;
background-color:rgba(0,0,0,.5);
}
.container .prev, .container .next {
position:absolute;
top:50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.container .prev {
left:0;
}
.container .next {
right:0;
}
<div class="overlay">
<div class="container">
<img src="http://placehold.it/1920x1080" alt="" />
<div class="caption">Some text...</div>
<a class="prev" href="#">Previous</a>
<a class="next" href="#">Next</a>
<div>
</div>
Is it even possible to solve this problem without javascript?

Answer 1

Right, here's a solution (as best as i could tell from what you're trying to accomplish):
<div class='container'>
<img class='image' src='http://placehold.it/1920x1080'>
</div>
body, .container{
position: absolute;
width: 100%;
height: 100%;
overflow:hidden;
}
.container {
top: 0;
left: 0;
}
.image {
position: absolute;
max-width: 80%;
max-height: 80%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
fiddle