Php 像谷歌图像搜索一样对齐图像

谷歌的图片显示如下：

但当我尝试这样做时，我得到了：

看起来这需要的不仅仅是浮动：左，但是什么？图像的高度和宽度未知。但我做了一个最大高度和最大宽度的检查，这样就不会太疯狂了

注意：rowtable只是一个保存图片名称（id）的数组。我删掉了一些东西来清理代码

function imageResize($image) {

$maxWidth  = 500;
$maxHeight = 395;

$size = getimagesize($image);
if ($size) {
    $imageWidth  = $size[0];
    $imageHeight = $size[1];
    $wRatio = $imageWidth / $maxWidth;
    $hRatio = $imageHeight / $maxHeight;
    $maxRatio = max($wRatio, $hRatio);
    if ($maxRatio > 1) {
        $outputWidth = $imageWidth / $maxRatio;
        $outputHeight = $imageHeight / $maxRatio;
    } else {
        $outputWidth = $imageWidth;
        $outputHeight = $imageHeight;
    }
    //echo 'width="'.$outputWidth.'" height="'.$outputHeight.'"';
return 'width="'.$outputWidth.'" height="'.$outputHeight.'"';
}

}
        $image = "images/screenshots/$rowtable[id].png";
        ?>
        <div style="float:left; padding:5px;"><img src="<?php echo "images/screenshots/$rowtable[id].png"; ?>" <?php echo imageResize($image); ?>></div>

函数imageResize（$image）{
$maxWidth=500；
$maxHeight=395；
$size=getimagesize（$image）；
若有（$尺寸）{
$imageWidth=$size[0]；
$imageHeight=$size[1]；
$wRatio=$imageWidth/$maxWidth；
$hRatio=$imageHeight/$maxHeight；
$maxRatio=max（$wRatio，$hRatio）；
如果（$maxRatio>1）{
$outputWidth=$imageWidth/$maxRatio；
$outputhweight=$imageHeight/$maxRatio；
}否则{
$outputWidth=$imageWidth；
$outputhweight=$imageHeight；
}
//echo'width=“”.$outputWidth.“height=“.$outputhweight.”；
返回'width=“”.$outputWidth.'height=“.$outputhweight.”；
}
}
$image=“images/screenshots/$rowtable[id].png”；
?>
" >

更新：

在观察家的评论之后，它起作用了。但我怎么能得到这个呢

---

因此，在垂直方向上有一个宽的图片中心，而不是停留在顶部。

谷歌的图像搜索将图像放入一个有序的列表中，每个列表元素具有以下样式：

.rg_li {
    display: inline-block;
    margin: 0 12px 12px 0;
    overflow: hidden;
    position: relative;
    vertical-align: top;
}

这就是你想要的吗

css:

---

你可以看看谷歌是如何在Firebug（或任何等效工具）中实现这一点的。我刚刚做到了，他们显然将每张图像包装在一个div（实际上是a

）中，高度设置为图像的高度，垂直填充设置为弥补差异。例如，我刚刚运行的搜索中有一个：

<li class="rg_li" style="width: 140px; height: 89px; padding: 11px 0pt;">

如果需要，您甚至可以在不使用CSS的情况下通过使用旧的HTML

align

属性来执行此操作，如下所示：

<p align="justify">
  <img align="middle" src="..." />
  <img align="middle" src="..." />
  ...
</p>

...

将包含div的高度设置为所需的最大高度；将填充设置为img@PetrMarek如何知道何时关闭包含的div并启动新的div？当用户更改浏览器窗口大小时，每行将显示更多（或更少）图片。仅供参考，请始终尝试反向工程。使用Chrome的开发工具（f12）或者Firefox的。在Chrome中，选择图像，右键单击并选择inspect元素。您将看到右侧的CSS选项，取消选中标记并查看其目的。这样您可以更好更快地学习Hanks！这很有效，您是否也知道如何垂直居中宽图片？我用一个示例更新了我的问题E

<p style="text-align: justify">
  <img style="vertical-align: middle" src="..." />
  <img style="vertical-align: middle" src="..." />
  ...
</p>

<p align="justify">
  <img align="middle" src="..." />
  <img align="middle" src="..." />
  ...
</p>