图片没有正确显示

Question

我有一个画廊，可以显示不同的图片。 我想要的效果是，当我点击图像时，它会变得更大，只要我点击它就会保持那么大。 example

但是当我点击它时，它会放大但图像会被切断 problem

我使用了库的列表并添加了一些CSS。

图像缩放的代码是：

@media (max-width: 1280px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

Answer 1

这可能是一个z-index问题。我猜你点击的图像是相对定位的（如果它不是，你应该这样做）。然后，只需将z-index设置为更高的数字即可，您应该没问题！

实施例： z-index: 100;