图片库代码问题

Question

我创建了这个图片库，在悬停时显示图像，但显示的图像在我打开它的每台计算机/浏览器中的不同位置，但对于我的生活，我无法弄清楚为什么。

我只是希望显示的图像出现在中间而不是在其他图像之上，但是当我在一台计算机上将它设置为该设置时，它在另一台计算机上看起来不同。

我是编码新手，所以我真的希望有人能提供帮助。这是我的 codepen 的链接：image gallery

  [1]: http://codepen.io/zenturtle/pen/ezDGC

Answer 1

为了保持一致的位置，您需要将#perimeter div 指定为position: relative，这样大图像的位置将始终与包含固定宽度的div 相关。否则，定位与浏览器/视口有关，这意味着它会根据浏览器的大小/宽度而有所不同。

#perimeter {position: relative;}

您现在可能需要调整所有大图像坐标。不过，有更有效的方法可以做到这一点。您应该能够使用一个 CSS 规则放置所有这些图像，而不是为每个图像单独放置一个。