带有图像预览的响应式缩略图库答案

【问题标题】：responsive thumbnail gallery with image preview带有图像预览的响应式缩略图库
【发布时间】：2016-09-16 06:59:38
【问题描述】：

我想问一下这种图片库是怎么做的（by fcalderan），

codepen.io/anon/pen/OPMeXM

反应灵敏。我想让它响应的原因是，当我需要在画廊中添加另一个项目时，它会与其余的拇指对齐/或在视口变得太窄时堆叠。我一个人做不到，感谢任何愿意抽出时间提供帮助的人！

更新：我可能不需要缩放/窗口预览做出响应，而是让整个画廊在宽度方面做出响应，因此在添加图像时，他的拇指会堆叠并放置在下方。

下面是图片的链接，它可能有助于可视化我想要实现的目标。

https://drive.google.com/file/d/0B1FMADgebxAyQkszbkpuVk1PRjQ/view?usp=drivesdk

非常抱歉各位，谢谢 Seiko85

【问题讨论】：

最简单的方法是使用像 bootstrap 这样的附加库来使用响应式网格。这样你就可以将各自的类添加到 dom 元素中，并且它应该对齐。如需进一步帮助，请提供您已经尝试过的内容。这不是为您完成全部工作的页面，但如果您遇到困难，我们很乐意为您提供帮助。
@Seika85，感谢您的回复，我希望仅使用 css 来完成，因为我是引导程序的新手，并且总是遇到引导程序媒体查询的一些问题。我只用 div 完成了它，但未能使其响应我之前制作的代码太乱了，不像火山口的比例布局使用描述列表的方式。很抱歉，我没有 jsfiddle 可提供，但稍后会尝试进行布局。感谢您的回复:)
Bootstrap 可能是您尝试的方式的开销。但我想向您展示一个众所周知的响应式网格库。但由于您向我们提供的信息很少，我只是想给您一些提示。

标签： css image width gallery responsive

【解决方案1】：

我使用了您的 codepen 示例并添加了引导程序以及相应的类。

请看这里：https://jsfiddle.net/hdqgeuqg/

我将class="container" 添加到<dl id="simple-gallery"> 和class="col-md-3" 到所有<dt> 元素。

然后需要进行一些 CSS 调整，例如：

dl.container {
    /*height: 488px;*/
    padding: 360px 5px 5px;
    /* ... */
}
dl.container:before { /* ... */ }
dt {
    /*height: 100px;*/
    /* ... */
}

更精致/响应更灵敏的小提琴：https://jsfiddle.net/hdqgeuqg/3/

【讨论】：

@seiko85 感谢您的快速回复，虽然我们可以添加缩略图，但顶部/上部是否可以响应，以便自动对齐画廊的右侧？这么晚才回复很抱歉。我感谢您的帮助！ :)
你能解释更多你想要完成的事情吗？你可以玩弄我的小提琴并更新它，这样我就可以看到你尝试了什么以及你卡在哪里了。
谢谢，这是我需要实现的快速图像：drive.google.com/file/d/0B1FMADgebxAyQkszbkpuVk1PRjQ/…。
你好，精工，这是我想出的，但响应/自动宽度是我无法弄清楚的。 jsfiddle.net/hdqgeuqg/1
这就是我推荐 Bootstrap 的原因，每个.container（或每个.row）都跨越一个新的 12 列网格。 .col-(s)-(n) 类（其中 (s) 是断点标识符之一（xs、sm、md、lg），(n) 是从 1 到12）描述它将分布在多少列中。所以你只需要将各自的类（如col-xs-6 col-sm-4）添加到已经有col-md-3的缩略图中：jsfiddle.net/hdqgeuqg/2