Question

我想问一下如何制作这种图片库（通过fcalderan），

codepen.io/anon/pen/OPMeXM

要有回应。我之所以想让它具有响应性，是因为当我需要在图库中添加另一个项目时，它会与其余的拇指对齐/或在视口变得太窄时堆叠。我不能独自做到这一点，感谢任何有空闲时间帮助的人！

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

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

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

我很抱歉，谢谢Seiko85

Answer 1

我使用了您的codepen示例并添加了bootstrap以及各自的类。

见这里：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/

响应缩略图库与图像预览

1 个答案: