Laravel 中的不同宽度和高度图像布局问题与 fancybox

Question

这是照片查看器 laravel 项目。它运作良好。但我对图像布局有疑问。下图是我当前的照片库页面。如您所见，图像不是直线。不好看

因为每张上传的照片尺寸的宽度和高度都不同，所以我猜会发生这种情况。我正在使用 Laravel。这是花式盒子。我正在使用这位先生的源代码。 https://www.itsolutionstuff.com/post/laravel-5-image-gallery-crud-example-from-scratchexample.html

我一直在 css 参数下进行更改，但无法修复。你能教我解决问题的代码吗？

CSS 共 index.blade.php

  <!-- Latest compiled and minified CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- References: https://github.com/fancyapps/fancyBox -->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
   .gallery
    {
        display: inline-block;
        margin-top: 20px;      

    }   

    .form-image-upload{
        background: #e8e8e8 none repeat scroll 0 0;
        padding: 15px;

    }

Index.blade.php

的图像输出

<div class='list-group gallery'>
            @if($images->count())
                @foreach($images as $image)
                <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
                    <a class="thumbnail fancybox" rel="ligthbox" href="images/{{ $image->image }}">
                        <img class="img-responsive" alt="" src="images/{{ $image->image }}" />
                        <div class='text-center'>
                            <small class='text-muted'>No.{{ $image->id }}</small>
                        </div> <!-- text-center / end -->
                    </a>                

                </div> <!-- col-6 / end -->
                @endforeach
            @endif
        </div>

Answer 1

您可以每 4 张图片添加一条分隔线，使其看起来更清晰 - 假设您使用的是 Bootstrap 4:

    @foreach($images as $image)
    <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
        <a class="thumbnail fancybox" rel="ligthbox" href="images/{{ $image->image }}">
            <img class="img-responsive" alt="" src="images/{{ $image->image }}" />
            <div class='text-center'>
                <small class='text-muted'>No.{{ $image->id }}</small>
            </div> <!-- text-center / end -->
        </a>                

    </div> <!-- col-6 / end -->

    @if ($image->number % 4 == 0)
        <div class="w-100"></div>
    @endif

    @endforeach

Answer 2

为什么你不用像这样的图片宽度和高度

<img class="img-responsive" alt="" src="images/{{ $image->image }}" height="48" width="48"/> // Here 48 in pixel size

Laravel 中的不同宽度和高度图像布局问题与 fancybox

Diffrent width and height images layout question in Laravel with fancybox

fancybox

laravel

laravel-5