私自身のライトボックス - 応答性の問題

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

サファリ（すべてが大丈夫です）

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; 
} 

は自動高さと幅を宣言します。