画像を動的にロードしてアスペクト比を維持する

Question

私は動的に画像をPHPで追加していました。画像の一部は水平で、一部は垂直です。どのように画像の幅/高さを設定し、画像が水平か垂直かを知らずに縦横比を維持するにはどうすればよいですか？今、画像は正方形になっています。理想的には、クライアントがコードを調整することなく画像を変更したいと思っています。

<?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

正確な縦横比を維持しながら、画像が完全に応答しますimg要素にこれらのルールを追加するには：働い

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