我自己的lightbox -响应性问题

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 (一切正常)

​

​

Mozilla Firefox

​

​

Google Chrome和Opera

​

​

Answer 1

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

声明自动的高度和宽度。