（ブラウザウィンドウの幅に基づいて）DIV内のサムネイルの位置を自動調整しますか？

Question

私は、側面に合ったサムネイルを表示しているウェブサイトを持っています。私はフィットしたいサムネイルをたくさん持っています。どのように今、次の行に行くときに大きなギャップがあります。

自動的にフィットするようにする方法はありますか？その間に他のサムネイルをすべて右から左に表示する方法がありますか？ここで

は、私のサイトです：FlashPics Photostream

申し訳ありませんが、それは混乱した場合。あなたがリンクに行くかどうかを確認する必要があります。

おかげで、 Coulton

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