具有不同尺寸的可适应图像网格

Question

我真的不知道这是否有解决方案，但如果有人知道它会很棒！

我只是想在需要时使用CSS和javascript。

我有什么：

图像网格，没有任何空白区域。实际上我使用 column-count

实现了内部响应列

我想要什么

每个图像在列内都是100％大小，我希望它们在悬停时更大。会发生什么，他们成长，但他们支持一切（你可以看到here） 如果我只是将每个图像都没有列，只是显示内联块，那么当图像增长时，它会在行的其余部分留下空白区域。

有没有办法让每个图像都能粘在一起（没有空白区域），即使其中一个图像长大了？

谢谢！

Answer 1

您可以尝试：

a:hover img, a:focus img {
  position: relative;
  z-index: 1;
}

将更大的图像带到前面。