我正在尝试创建一个响应式图像库,就像从数据库中选择的图像中形成的网格一样。我已经使用 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/。但我不知道如何实现这种动态和响应式图像行为?
我最终使用了合理的图库插件,而不是创建自定义 JavaScript 来调整行和图像大小。这个很棒的 jquery 插件使我能够实现所需的结果+添加悬停在标题上和单击时的灯箱/幻灯片。感觉就像作弊,因为它使用起来很简单:)
如何消除响应式图库两侧的边距?我的左对齐,右侧有一大块空白