jsFiddle Demo和code

Question

我有一个显示适合侧面的缩略图的网站。我有一堆想要适合的缩略图。现在怎么样，当图片进入下一行时，存在很大的差距。

有没有办法让它自动形成合适的，所以右边总会有一个图像，并且间隔出所有其他缩略图？

这是我的网站：FlashPics Photostream

很抱歉，如果它令人困惑。你应该看看你是否去了链接。

谢谢，库尔顿

Answer 1

抱歉，我找不到仅限CSS的解决方案。这是一个jQuery + CSS解决方案：

jsFiddle Demo和code

我在window.resize事件中挂了一个函数，该函数计算显示每行最大图像数所需的宽度。宽度应用于图库包装器，以便它自动居中在窗口中对齐。图像之间的间隙加上窗口左/右边缘之间的间隙保持一致。

Answer 2

我创建了一个小小的类，它可以拍摄真实的图像并创建它的拇指也许它对你有用

<?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;
            }
        }
    }
?>

非常好用。

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

自动调整缩略图在DIV中的位置（基于浏览器窗口宽度）？

2 个答案:

jsFiddle Demo和code