html - Responsive image inside vertical centered responsive container -

i'm trying create responsive vertically centered lightbox, supporting different image sizes , controls relativ positioned image without use of javascript.

i got working in safari, unfortunately image doesn't scale heightwise in firefox , chrome overflows parent.

here's jsfiddle

here 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 possible solve problem without javascript?

right, here's solution (as best tell you're trying 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