I have a website that is displaying thumbnails that fits to the side. I have a bunch of thumbnails I want to fit. How it is now, there is a big gap when a picture goes to the next line.

Is there a way to have it automatically form fit so there will always be a image on the right and space out all the other thumbnails in between?

Here's my site: FlashPics Photostream

Sorry if it was confusing. You should see if you go to the link.

Thanks, Coulton

Sorry I could not find a CSS only solution. Here is a jQuery + CSS solution instead:

jsFiddle Demo and code

I've hooked a function inside the window.resize event that calculates the width required to show maximum number of images per row. The width is applied to the gallery wrapper so that it automatically center aligns itself within the window. The gaps between images plus the gap between left/right edge of the window remains consistent.

I have create a little class that take a real image and create the thumb of it maybe it can be usefull for you

<?php
class thumbnail
    {
        var $sourceFile; // We use this file to create the thumbnail
        var $originalFilename; // We use this to get the extension of the filename
        var $destinationDirectory; // The Directory in question
        var $destinationDirectoryFilename; // The destination filename
        var $failed ; 
        var $createImageFunction = '';
        var $outputImageFunction = '';

        function generate($sourceFile = "", $originalFilename = "", $destinationDirectory = "", $destinationDirectoryFilename = "", $width = -1, $height = -1)
        {
      if (!empty($sourceFile))
        $this->sourceFile = $sourceFile;

      if (!empty($originalFilename))
        $this->originalFilename = $originalFilename;

      if (!empty($destinationDirectory))
        $this->destinationDirectory = $destinationDirectory;

      if (!empty($destinationDirectoryFilename))
        $this->destinationDirectoryFilename = $destinationDirectoryFilename;

      if (!empty($width))
        $this->width = $width;

      if (!empty($height))
        $this->height = $height;

      list($this->extension) = explode('.', $this->originalFilename);

            switch ($this->extension)
            {
                case 'gif' :
                    $createImageFunction = 'imagecreatefromgif';
                    $outputImageFunction = 'imagegif';
                  break;

                case 'png' :
                    $createImageFunction = 'imagecreatefrompng';
                    $outputImageFunction = 'imagepng';
                  break;

                case 'bmp' :
                    $createImageFunction = 'imagecreatefromwbmp';
                    $outputImageFunction = 'imagewbmp';
                  break;

                case 'jpg': case 'jpeg':
                    $createImageFunction = 'imagecreatefromjpeg';
                    $outputImageFunction = 'imagejpeg';
                  break;

                default : 
                    exit("Sorry: The format '{$this->extension}' is unsuported");
                  break;
            }

            $this->img  = $createImageFunction($this->sourceFile);

            list($this->org_width, $this->org_height) = getimagesize($this->sourceFile);

            if ($this->height == -1)
            {
                $this->height = round($this->org_height * $this->width / $this->org_width);
            }

            if ($this->width == -1)
            {
                $this->width = round($this->org_width * $this->height / $this->org_height);
            }    

            $this->xoffset = 0;
            $this->yoffset = 0;

            $this->img_new = imagecreatetruecolor($this->width, $this->height); 

            if ($this->img_new)
            {
                imagecopyresampled($this->img_new, $this->img, 0, 0, $this->xoffset, $this->yoffset, $this->width, $this->height, $this->org_width, $this->org_height);

                list($this->newFilename) = explode('.', $this->destinationDirectoryFilename);

                $this->fullDestination = ($this->destinationDirectory.'/'.$this->newFilename.'.'.$this->extension);

                $outputImageFunction($this->img_new, $this->fullDestination);
            }
            else
            {
                $this->failed = true;
            }

            if ($this->failed == false)
            {
                return $this->fullDestination;
            }
        }
    }
?>

Very easy to use.

<?php 
require_once 'thumb.class.php' ; 
$thumb = New thumbnail;
$thumbnail->generate($tempfile,$originalname,$destination,$width,$height) ; 
?>