Question

我正在尝试创建一个响应式图像库，就像来自数据库中的一系列图像的网格一样。我使用bootstrap为列表元素创建列。

因为图像的大小/宽高比不同（甚至可能是人像风景），所以下面的图像不适合并移动到相应的列，从而产生不需要的空白。

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

示例：

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

编辑：

实现上述目标的理想结果将类似于此处显示的示例https://500px.com/。但我不知道如何实现这种动态和响应的图像行为？

Answer 1

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

OR

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

Answer 2

您可以使用css

解决此问题

只需添加此

即可

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

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

<强> Check This Demo

Answer 3

我最终使用合理的Gallery插件，而不是创建自定义javascript来调整行和图像大小。这个非常棒的jquery插件让我可以达到预期的效果+点击鼠标悬停在字幕和灯箱/幻灯片上。感觉像作弊因为它如此简单易用：）

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

没有空格的响应式图像库

3 个答案: