Meine eigene Leuchtkasten - Ansprechempfindlichkeit Ausgabe

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 (alles in Ordnung ist)

Mozilla Firefox

Google Chrome und Opera

Answer 1

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

Deklarieren Auto Höhe und Breite.