没有空格的响应式图片库

Question

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

由于图像的 sizes/aspect 比例不同（甚至可能是纵向和横向），下面的图像不适合并被移动到一个可容纳的列中，从而产生不需要的空白。

任何人都可以建议一种方法 resize/adjust 图像而不裁剪或改变宽高比（最好使用纯 css）以使所有网格 spaces/columns 包含图像吗？

示例：

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

您可以使用 css

来解决这个问题

只需添加这个

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

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

Check This Demo

Answer 3

我没有创建自定义 javascript 来调整行和图像大小，而是最终使用了 justified Gallery 插件。这个很棒的 jquery 插件让我获得了想要的结果 + 添加悬停在字幕上并在点击时 lightbox/slideshow。感觉就像在作弊，因为它使用起来非常简单:)

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

没有空格的响应式图片库

Responsive Image Gallery without whitespace

css

image-gallery

twitter-bootstrap