Различный вопрос о ширине и высоте изображения в Laravel с fancybox - PullRequest
Новая
       54

Различный вопрос о ширине и высоте изображения в Laravel с fancybox

0 голосов
/ 29 апреля 2020

Вот просмотрщик фотографий laravel проект. это сработало хорошо. но у меня проблема с макетом изображения. Это изображение ниже - моя текущая страница фотогалереи. Как вы можете видеть изображения не линии. выглядит нехорошо.

enter image description here

Поскольку размер каждого загружаемого фото различается по ширине и высоте, так что это происходит, я думаю. Я использую 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;

    }

Вывод изображения индекса. клинок. 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>

Ответы [ 2 ]

1 голос
/ 29 апреля 2020

Почему вы не используете ширину и высоту изображения просто так 

<img class="img-responsive" alt="" src="images/{{ $image->image }}" height="48" width="48"/> // Here 48 in pixel size
1 голос
/ 29 апреля 2020

Вы можете добавить разрывную линию каждые 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
...