Chrome does not display image the same as other browsers - html

Question

I'm trying to have an image gallery where pictures are displayed on the center of the screen, both vertically and horizontally; the posted fiddle is working fine on Edge, Internet Explorer and (Java Netbeans 8.02) Embedded Web Browser except on Google Chrome.
The problem in Chrome is as follows: if the picture's resolution is higher than the screen picture's edges will not be visible; the idea is to have the picture displayed without losing a pixel.
CSS:
.fullscreenContainer{
position: fixed;
overflow: hidden;
width: 100%;
height: 100%;
top: 0; right: 0; bottom: 0; left: 0;
background-color:rgba(0,0,0,0.55);
}
.imageGallery-container {
background-color: white;
z-index: 10000;
margin: auto;
position: relative;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
/* IE 9 */
-webkit-transform: translateY(-50%);
/* Safari */
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.imageGallery-container > img {
margin: auto;
max-width: 100%;
max-height: 100%;
}
HTML
<div class="fullscreenContainer">
<div class="imageGallery-container">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/03/high-resolution-wallpapers-2.jpg">
</div>
</div>
https://jsfiddle.net/mL72yytk/2/

Answer 1

What's wrong with flexbox?
.fullscreenContainer{
position: fixed;
z-index: 10000;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
}
.fullscreenContainer img {
display: block;
max-height: 100vh;
max-width: 100vw;
}
<div class="fullscreenContainer">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/03/high-resolution-wallpapers-2.jpg">
</div>
Don't forget to prefix.