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

这里是照片查看器laravel项目。它工作得很好。但我对图像布局有问题。 下图是我当前的照片库页面。正如你所看到的，图像不是直线的。看起来不太好

因为每个上传的照片大小都是不同的宽度和高度，所以我猜会发生这种情况。 我用的是拉威尔。这是fancybox。 我正在使用这位先生的源代码。

我一直在更改css参数，但无法修复。 你能教我如何解决这个问题吗

index.blade.php的CSS

  <!-- 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;

    }

<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> 

.画廊
{
显示：内联块；
边缘顶部：20px；
}   
.表格图像上传{
背景：#e8e8e8无重复滚动0；
填充：15px；
}

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;

    }

<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> 

@如果（$images->count（））
@foreach（$images作为$image）
@endforeach
@恩迪夫

您可以每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

@foreach（$images作为$image）
@如果（$image->number%4==0）
@恩迪夫
@endforeach

您可以每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

@foreach（$images作为$image）
@如果（$image->number%4==0）
@恩迪夫
@endforeach

为什么不像这样使用图像宽度和高度

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

image}“height=“48”width=“48”/>//此处为48像素大小

为什么不像这样使用图像宽度和高度

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

image}“height=“48”width=“48”/>//此处为48像素大小

Hi。亲爱的@Christophe Hubert。你又回答我了。非常感谢。我试过你的代码，但看起来一样。我更新引导链接。我的引导版本是3.3.7.Hi。亲爱的@Christophe Hubert。你又回答我了。非常感谢。我试过你的代码，但看起来一样。我更新引导链接。我的引导版本是3.3.7。你必须使用图像宽度和高度简单地用谷歌搜索“css图像网格”，有很多资源，例如，亲爱的@janis谢谢你回答我。哇！听起来很有趣。很抱歉这次不行，但我会用这个未来。非常感谢。你必须使用图像宽度和高度简单地用谷歌搜索“css图像网格”，有很多资源，例如，亲爱的@janis谢谢你回答我。哇！听起来很有趣。很抱歉这次不行，但我会用这个未来。非常感谢。亲爱的@A.A.谢谢你回答我。对不起，我没有得到使用权，但现在我得到了。好。。。我试过你的密码。它变得更好了，但仍然有一些图像看起来不是直线。有些图像是垂直的，有些是水平的。如果您确实对齐了图像，那么当用户上载图像时，请检查验证或按预期调整图像大小。然后，所有的图像都像你所期望的那样，看起来不错@greenironDear@A.A Noman。对你完全正确。但我必须接受任何形状的图像。正如你可以看到我目前的形象。推动另一个图像的东西。你有没有其他方法来校准这个？你没有问题。您可以接受所有形状的图像。但是，当您保存图像时，请先调整其大小，然后再保存。希望它能解决你的问题。或者您必须严格维护

图像响应

@greeniron非常感谢。是的，我会按照你的方式做。我真的很感激。亲爱的@A.A.谢谢你回答我。对不起，我没有得到使用权，但现在我得到了。好。。。我试过你的密码。它变得更好了，但仍然有一些图像看起来不是直线。有些图像是垂直的，有些是水平的。如果您确实对齐了图像，那么当用户上载图像时，请检查验证或按预期调整图像大小。然后，所有的图像都像你所期望的那样，看起来不错@greenironDear@A.A Noman。对你完全正确。但我必须接受任何形状的图像。正如你可以看到我目前的形象。推动另一个图像的东西。你有没有其他方法来校准这个？你没有问题。您可以接受所有形状的图像。但是，当您保存图像时，请先调整其大小，然后再保存。希望它能解决你的问题。或者您必须严格维护

图像响应

@greeniron非常感谢。是的，我会按照你的方式做。我真的很感激。