php - 动态加载图像并保持纵横比

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; /* removes bottom margin/whitespace */
  width: 100%; /* also scales with 100vw */
  max-height: 100vh; /* doesn't scale with 100% */
}