html - 图片显示不正确

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;