Question

Google shows its images like this:

But then when I try to do it, I get this:

It seems this will need something more than just float:left, but what? The images will be of unknown height and width. But I put in a max-height and max-width check so it doesn’t get too crazy.

Note: rowtable is just an array that holds the picture name (id). I cut some stuff out to clean the code.

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>

UPDATE:

After watcher’s comment, it works. But how can I get this?

So have a wide picture center vertically, rather than sticking to the top.

Answer 1

Google’s Image Search puts the images into an ordered list, with each list element having the following styles:

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