Jquery 响应缩略图模式框

有人能帮我弄一个“快速响应的缩略图模态盒”来工作吗

Code so far:

它应该有：

• 2行，每行5张图片

• 动态高度：自动

• 宽度：屏幕的75%

• 始终保持在屏幕的绝对中心

• 调整大小时保持纵横比（响应性）

---

我希望使用css唯一的方法来实现它，但是jquery也很好。

对基本结构进行了一些快速更改，让您开始正确的工作

Code:

有很多不必要的CSS。总是要小心，不要把事情搞得太复杂。CSS有时是这样的，你认为你需要添加一些东西来解决问题，但实际上你需要删除最初并不明显的问题

注意：如果没有JavaScript，就不可能将其垂直居中，因为模式框及其容器都没有固定的高度。您必须通过脚本获取高度，并相应地设置长方体的位置

我没有为您实现任何JavaScript，因为StackOverflow的目的不是外包您的工作，而是帮助您自己找到解决方案：）

---

希望这能帮助您重新回到正轨。

非常感谢！这就是我所需要的，事实上，这让我在花了几天的时间之后回到了正轨！使用Jquery，我能够将模式框居中。但仍有一些奇怪之处：1。将窗口调整为模式高度时，可以看到它并非完全位于垂直中间的中心。2.当我将鼠标悬停在5号图片上时，画面中断。我不知道为什么，因为对齐图像的LI元素不会改变边距，只有img大小会改变。它不能是边距，因为在悬停或处于活动状态时，LI的边距不会更改。