同じ画像サイズのブートストラップギャラリー

Question

私はLaravelとBoostrapとギャラリーを作りたいと思っています。実際には困っています。 まず、ここに私のコードです：

  @foreach($files as $file) 
      @if($file->getFilename() !== "cover.jpg") 
       <div class="col-lg-3 col-md-4 col-xs-6 gallery-container"> 
        <a href="{{url($urldirectory.$file->getFilename())}}"> 
         <img src="{{url($urldirectory.$file->getFilename())}}" class="img-responsive thumb"/> 
        </a> 
       </div> 
      @endif 
     @endforeach 

そして、私は別のサイズで画像を置けばかどうかの肖像画や風景の中に、私は、高さ寸法の違いを取得しています。そして、私は各列の間に大きなスペースを持っています。

私は現在、CSSは次のとおりです。

.gallery-container{ 
    height: 300px; 
} 

誰もが私がここで見逃しているものを参照してください？

Answer 1

あなたの質問から私を含めて、最大の高さよりも大きなイメージを理解しました。

あなたのCSSにこれを追加しようとすることができます

.thumb { 
    max-height: 300px; 
} 

これは、画像の最大の高さを設定します。あなたも最大幅を設定したい場合は、次のCSSを追加することができます：

.thumb { 
    max-height: 300px; 
    max-width: 300px; 
} 

希望の作品です！

Answer 2

Divを使用して画像の高さを設定しないでください。 高さと幅をimgタグに付けて、gallery-containerクラスを削除します。

あなたのコードは、車輪の再発明なぜこの

@foreach($files as $file) 
      @if($file->getFilename() !== "cover.jpg") 
       <div class="col-lg-3 col-md-4 col-xs-6"> 
        <a href="{{url($urldirectory.$file->getFilename())}}"> 
         <img src="{{url($urldirectory.$file->getFilename())}}" class="img-responsive thumb" width="304" height="300"/> 
        </a> 
       </div> 
      @endif 
     @endforeach 

Answer 3

のようになりますか？あなたがしなければならない、このすべてから

http://leastjs.com/

は次のとおりです。

<section id="least"> 
    <div class="least-preview"></div> 
    <ul class="least-gallery"> 
    @if(isset($images)) 
     @foreach($images as $img) 
      <li> 
       <a href="{{asset($img->source)}}" title="View" data-subtitle="{{$img->title}}" data-caption="<p>{{$img->caption}}</p><br> 
        <img src="{{asset($img->source)}}" alt="" /> 
       </a> 
      </li> 
     @endforeach 
    @endif 
</ul> 
</section> 

とスクリプト

<script> 
    $(document).ready(function() { 
     $('.least-gallery').least(); 
    }); 
</script> 

PS：あなたはまた、画像のプレビューや他のもののようなクールな効果を得る

のみのCSSソリューション

.gallery-container li { 
    position: relative; 
    vertical-align: top; 
    display: inline-block; 
    margin: 0 10px 10px 0; 
} 

.gallery-container li a { 
    position: relative; 
    display: block; 
    text-decoration: none; 
    width: 240px; 
    height: 150px; 
} 
.gallery-container li a img { 
    width: 240px; 
    height: 150px; 
} 

Answer 4

私はあなたがサーバー側から画像のサイズを操作する必要があると思います。私はhttps://github.com/Intervention/imageを使用しました。それから私はURL based image manipulationを使いました。