Diffrent width and height images layout question in Laravel with fancybox - laravel

Question

Here is Photo viewer laravel project. it worked well. but I'm having problem about image layout.
This below image is my current photo gallery page. As you can see images are not line. looks not good.
Becase each uploaded photo size are diffrent width and height so this happens I guess.
I'm using Laravel. And this is fancybox.
and I'm using this gentleman's source code.
https://www.itsolutionstuff.com/post/laravel-5-image-gallery-crud-example-from-scratchexample.html
I had been changing below css parameter but I couldn't fix.
Could you teach me code to fix situation please?
CSS of 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;
}
Image output of 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

Why you don't use Image Width and Height just like this
<img class="img-responsive" alt="" src="images/{{ $image->image }}" height="48" width="48"/> // Here 48 in pixel size

Answer 2

You can add a break line every 4 pictures to make it look cleaner - assuming you are using 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