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>

P.S。：你也可以获得酷炫的效果，如图像预览和其他东西

只有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。

具有相同图像大小的Bootstrap Gallery

4 个答案: