Bilder dynamisch laden und Seitenverhältnis beibehalten

Question

Ich habe eine Bildergalerie wo ich die Bilder dynamisch mit PHP hinzufüge. Einige der Bilder sind horizontal und einige sind vertikal. Wie stelle ich die Breite/Höhe der Bilder ein und behalte das Seitenverhältnis bei, ohne zu wissen, ob das Bild horizontal oder vertikal ist? Gerade jetzt erscheinen die Bilder quadratisch. Idealerweise möchte ich, dass der Client die Bilder ändert, ohne den Code anpassen zu müssen.

<?php 
$filelist = glob("*.JPG"); 
foreach ($filelist as $file) { 
    echo '<div class="gallerycell">'; 
    echo '<a href="'.$file.'"><img src="'.$file.'" width="300" height="300"></a>'; 
    echo '<p>'.substr($file,strpos($file,'/') + 0,-4).'</p>'; 
    echo '</div>'; 
} 
?> 

.gallerycell { 
    display: inline-block; 
    width: 300px; 
    height: 300px; 
    text-align: center; 
    margin: 30px; 
} 

Answer 1

Um Bilder voll ansprechbar zu machen, während das genaue Seitenverhältnis zu halten, diese Regeln zu dem img Elemente hinzufügen:

img { 
    display: block; 
    max-width: 100%; /* also scales with 100vw */ 
    max-height: 100vh; /* doesn't scale with 100% */ 
}