html - 我自己的灯箱 - 响应问题

Question

HTML

<div class="photo-gallery">
  <img>
</div>

<div class="dark" id="photo-gallery">
  <div class="container">
    <h1>Fotogaléria</h1>

    <div class="photos">
      <a href="#" data-photo=""></a>
      <a href="#" data-photo=""></a>
    </div>
  </div>
</div>

CSS

.photo-gallery {
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  height: 100%;
  justify-content: center;
  left: 0;
  padding: 1.25rem;
  position: fixed;
  top: 0;
  width: 100%;
}

.photo-gallery img {
  box-shadow: 0 0 1.25rem;
  max-height: 100%;
  max-width: 100%;
}

codepen.io - http://codepen.io/marekkobida/pen/RaxwPR

Safari(一切正常)

火狐浏览器

谷歌浏览器和 Opera

Answer 1

.photo-gallery img {
  box-shadow: 0 0 1.25rem;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
}

声明自动高度和宽度。