使用CSS flexbox或网格布局的响应式图片库

问题描述：

我正在使用Image-Gallery-Widget，用户可以在其中设置缩略图宽度，缩略图高度和边距（缩略图之间），并且该小组件将呈现所有图像缩略图一个很好的网格，每个图像具有相同的宽度和高度。使用CSS flexbox或网格布局的响应式图片库

我想知道css-flexbox或css-grid是否可以在不需要在代码中定义行和列而不需要断点/媒体查询的情况下实现这一点。

缩略图图像被包裹在一个锚，所以画廊的项目（或并网项目）将是这个样子：

<a href="#" class="gallery-item"> 
    <img src="myimage" width="300" height="200" /> 
</a>

画廊项目应充分填补div容器，这意味着，在一行中的最后一个缩略图和容器div的右边缘之间不应该有空隙（除非我们没有足够的项目来填充行，即当连续3个英尺ft，但我们只有8个项目时，则第三排只有两个项目，右侧有一个空隙，宽度只有一个项目）。

图库项目永远不会比用户设置的缩略图宽度更宽，因为我们不想降低缩略图的质量。假设这个例子的宽度为300px。图库项目之间的边距由用户固定和设置。如果没有足够的项目留下来一补行，只是左对齐他们即像这样：

我不想在CSS定义任何断点，也没有添加任何HTML的行/列结构。我希望浏览器能够像容器一样放置尽可能多的图库项目。如果右侧存在间隙（即3个缩略图* 300px宽度= 900px，但容器宽度为1000px），则浏览器应缩小网格项目，以便再添加一个图库项目，从而消除差距。我需要能够为每个图库项目定义一个边距。

你可以看到所需的响应行为，在这个GIF（改变浏览器的宽度时）：

您在GIF看到什么是不Flexbox的完成，但需要一吨的CSS，我是的希望避免与flexbox。我已经对Flexbox进行了相当多的研究，但还没有完全摆脱困境。

感谢您的任何提示！

是JS允许在这里？ – blackmiaool

不，我正在寻找一个CSS唯一的解决方案。 –

请发布您尝试过的代码。 –

答

使用flex功能应该足以满足您的任务。请注意IE11中的部分支持：http://caniuse.com/#feat=flexbox。

把这些样式的容器上：

.gallery { 
    display: flex; 
    flex-wrap: wrap; 
    align-content: flex-start; 
    justify-content: space-between; 
}

样式的包装：

.gallery a { 
    flex-grow: 1; 
    flex-basis: 125px; 
    max-width: 300px; 
    margin: 5px; 
}

风格的图片：图片之间

.gallery img { 
    height: 100%; 
    width: 100%; 
}

空间可以使用margin简单定义。为了保持图像比例，您可以使用例如链接（<a>）作为图像的包装（<img>）。

此外，为了防止放大图像，您可以在锚点上应用flex-grow,flex-basis和max-width属性。在最后一行中拉伸图像时也存在问题 - 对该问题的破解是将n - 1（其中n是图像数量）容器中的空项目。

在图像上设置width和height到100%强制他们至多max-width属性定义的宽度自动增长，同时保持高宽比。

请检查工作示例： FIDDLE

最后一行怎么样？ – blackmiaool

我认为它看起来更好地拉伸到整个线宽，不是吗？ :) – luke

呃...我不是OP，所以我不知道。 – blackmiaool

答

如果你不介意使用媒体断点，使用新CSS Grid Layout。不要忘记将它作为IE10 +支持的前缀。

网：

.gallery { 
    display: grid; 
    grid-gap: 5px; 
}

响应图片：

.gallery img { 
    width: 100%; 
}

媒体断点（值在引导4-4）

@media (max-width: 575.98px) { 
    .gallery { 
     grid-template-columns: repeat(1, 1fr); 
    } 
} 
@media (max-width: 768.98px) and (min-width: 576px) { 
    .gallery { 
     grid-template-columns: repeat(2, 1fr); 
    } 
} 
@media (max-width: 991.98px) and (min-width: 768px) { 
    .gallery { 
     grid-template-columns: repeat(3, 1fr); 
    } 
} 
@media (max-width: 1199.98px) and (min-width: 992px) { 
    .gallery { 
     grid-template-columns: repeat(4, 1fr); 
    } 
} 
@media (min-width: 1200px) { 
    .gallery { 
     grid-template-columns: repeat(5, 1fr); 
    } 
}

jsFiddle

使用CSS flexbox或网格布局的响应式图片库

相关推荐