Chrome does not display image the same as other browsers

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/

See https://stackoverflow.com/questions/14554908/imgs-max-height-not-respecting-parents-dimensions. Which browsers do you need to support? — Ry-, Aug 06 '17 at 22:44
I don't see any difference between Firefox and Chrome. I would never use Edge or IE as a reference for how things should work. EDIT: And now I don't see any difference in IE either. — Rob, Aug 06 '17 at 22:59
I'm not sure I understand what you want. `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` - So, you want to display a picture in a smaller space than can contain it, but you don't want to lose a pixel of information? That's not possible. Do you mean you want to scale the image down so it fits in the window? That does lose pixels by its nature. — Erik Funkenbusch, Aug 06 '17 at 23:05
@Erik, they want `background-size:contain` behavior without the image growing above actual size and centered both ways. That's what I understood from question + posted code. — tao, Aug 06 '17 at 23:12

score 0 · Answer 1 · answered Aug 06 '17 at 23:06

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.

Chrome does not display image the same as other browsers

1 Answers1