动态加载图像并保持宽高比

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% */ 
}