动态加载图像并保持宽高比
问题描述:
我有一个图片库,我动态地使用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;
}
答
为了使图像充分响应,同时保持准确的比例,添加这些规则到img
元素:
img {
display: block;
max-width: 100%; /* also scales with 100vw */
max-height: 100vh; /* doesn't scale with 100% */
}
@VXp这工作。如果您将其添加为帖子,我会将其标记为正确。谢谢。 – BrianC987