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

Question

谷歌显示如下图像：

但是当我尝试这样做时，我明白了：

似乎这需要的东西不仅仅是浮动：左，但是什么？图像的高度和宽度都是未知的。但是我进行了最大高度和最大宽度检查，所以它不会太疯狂。

注意：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>

更新：

在观察者的评论之后，它有效。但我怎么能得到这个呢？

因此，请在垂直方向上放置宽幅图片，而不是贴在顶部。

Answer 1

Google的图片搜索将图片放入有序列表中，每个列表元素都具有以下样式：

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

Answer 2

可能是你想要的http://jsfiddle.net/sandeep/EAGQH/28/

的CSS：

ul li {
    display:inline-block;
    margin:10px 0 0 10px;
    text-align: center;
}

img{vertical-align:middle}

Answer 3

您可以查看Google如何在Firebug（或任何等效工具）中执行此操作。我刚刚做了，显然他们将每个图像包裹在一个div（实际上是一个＆lt; li＆gt;）中，其高度设置为图像的高度，垂直填充设置为差异。例如，这是我刚刚运行的搜索中的一个：

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

（请参阅watcher's answer了解适用于班级rg_li的样式。）显然，他们还会动态调整每条线的高度以匹配其上最高图像的高度，因此如果我调整大小窗口，填充值重新计算。

但无论如何，如果你只是想要一堆垂直居中的图像，你不需要任何这种诡计。只需将所有图像包装在＆lt; p＆gt;中即可。或者＆lt; div＆gt;并使用vertical-align: middle设置样式。

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

如果需要，您甚至可以使用旧的HTML align属性执行此操作，如下所示：

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