无空白的响应式图片库

Question

我正在尝试创建一个响应式图像库，就像从数据库中选择的图像中形成的网格一样。我已经使用 bootstrap 为列表元素创建列。

由于图像的尺寸/长宽比不同（甚至可能是纵向横向），因此下面的图像不适合并被移动到适应列，从而产生不需要的空白。

任何人都可以建议一种方法来调整图像大小/调整图像而不裁剪或更改宽高比（最好使用纯CSS）以使所有网格空间/列都包含图像？

示例：

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

编辑：

实现上述目标的预期结果就像此处所示的示例https://500px.com/。但我不知道如何实现这种动态和响应式图像行为？

Answer 1

由于图像的高度不相同，我们需要为所有图像设置一个共同的高度或最小高度，然后它将以正确的方式对齐..

或

动态设置每行高度，例如https://500px.com/

Answer 2

我最终使用了合理的图库插件，而不是创建自定义 JavaScript 来调整行和图像大小。这个很棒的 jquery 插件使我能够实现所需的结果+添加悬停在标题上和单击时的灯箱/幻灯片。感觉就像作弊，因为它使用起来很简单:)

插件：http://miromannino.github.io/Justified-Gallery/

Answer 3

你可以使用CSS解决这个问题

只需添加这个

.a{
   height: 300%;
  width: 200%; 
}

根据需要更改高度和宽度...

查看此演示

Answer 4

如何消除响应式图库两侧的边距？我的左对齐，右侧有一大块空白