Search code examples
csstwitter-bootstrapimage-gallery

Responsive Image Gallery without whitespace

Im trying to create a responsve image gallery, like a grid from a selection of images from a database. I have used bootstrap to create columns for list elements.

Because the images are different sizes/aspect ratios (maybe even portrait landscape) the images below dont fit and are moved along to a accomadating column, creating unwanted whitespace.

Can anyone suggest a method to resize/adjust the images without cropping or changing aspect ratio (preferably using pure css) to enable all grid spaces/columns to contain an image?

EXAMPLE:

image-gallery HTML:

<div class="gallery-container container-content well" style="height: 62px;">
    <ul class="layout-gallery row">
        <li class="image col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <img src="img/layout/abstract-gandex.jpg"></img>
        </li>
        <li class="image col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <img src="img/layout/blob"></img>
        </li>
        <li class="image col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <img src="img/layout/aqua-blue-tiger.jpg"></img>
        </li>
        <li class="image col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <img src="img/layout/blue abstract2-gandex.jpg"></img>
        </li>
        <li class="image col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <img src="img/layout/blue abstract3-gandex.jpg"></img>
        </li>
        <li class="image col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <img src="img/layout/blue abstract4-gandex.jpg"></img>
        </li>
        <li class="image col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <img src="img/layout/blue abstract5-gandex.jpg"></img>
        </li>
        <li class="image col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <img src="img/layout/blue abstract6-gandex.jpg"></img>
        </li>
        <li class="image col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <img src="img/layout/blue abstract7-gandex.jpg"></img>
        </li>
        <li class="image col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <img src="img/layout/blue abstract-gandex.jpg"></img>
        </li>
    </ul>
</div>

CSS:

  .gallery-container
  {
      margin-top: 2%;
      margin-bottom: 2%;
      overflow:auto;
  }
 .layout-gallery
 {         
      padding:0 0 0 0;
      margin:0 0 0 0;
      margin-top: 2%;
      margin-bottom: 2%;
  }
  .layout-gallery > li 
  {     
      list-style:none;
      margin-bottom:25px;           
  }
  .layout-gallery > li img 
  {
    display: block;
      cursor: pointer;
      width: 100%;
      border: 2px solid #E3E3E3;
      box-shadow: 0px 10px 10px #AEAEAE;
  }

EDIT:

The desired result to achieve the above would be like the example shown here https://500px.com/. But I have no idea how to accomplish this dynamic and responsive image behaviour?

Solution

  • Rather than creating custom javascript to adjust the row and image sizes I ended up using the justified Gallery plugin. This awsome jquery plugin has allowed me to achieve the desired result + add hover over captions and lightbox/slideshow on click. Feels like cheating coz its so simple to use :)

    Plugin: http://miromannino.github.io/Justified-Gallery/