动态加载图像并保持纵横比答案

【问题标题】：Dynamically load images and keep aspect ratio动态加载图像并保持纵横比
【发布时间】：2018-03-27 08:24:16
【问题描述】：

我有一个图片库，我正在使用 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;
}

【问题讨论】：

@VXp 成功了。如果您将其添加为帖子，我会将其标记为正确。谢谢。

标签： php html css

【解决方案1】：

要使图像完全响应，而不改变它们的纵横比，请将这些规则添加到img 元素：

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

【讨论】：