图库代码问题

Question

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

我只是希望显示的图像出现在中间，而不是在其他图像的顶部，但是当我在一台计算机上得到它时，它在另一台计算机上看起来不同。

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

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

Answer 1

要获得一致的展示位置，您需要提供#perimeter div position: relative，以便大图像的定位始终与包含div的位置相关，后者具有固定的宽度。否则，定位与浏览器/视口相关，这意味着它将根据浏览器的大小/宽度而有所不同。

#perimeter {position: relative;}

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