css - Responsive Image Gallery without whitespace -

im trying create responsve image gallery, grid selection of images database. have used bootstrap create columns list elements.

because images different sizes/aspect ratios (maybe portrait landscape) images below dont fit , moved along accomadating column, creating unwanted whitespace.

can suggest method resize/adjust images without cropping or changing aspect ratio (preferably using pure css) enable grid spaces/columns contain image?

example:

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 achieve above example shown here https://500px.com/. have no idea how accomplish dynamic , responsive image behaviour?

since images not same height,we need set height or min-height images in common aligned in proper way..

or

dynamically setting each row height example in https://500px.com/