我自己的收藏夾 - 響應問題

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瀏覽器

谷歌Chrome和Opera

Answer 1

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

聲明自動高度和寬度。