javascript - 添加滚动到 Lightbox2

Question

Heres an image of the issue I'm trying to resolve. 我正在我的投资组合网站上工作；我有我的一些个人元素的图像，它们的宽度都相同，但有些高度不同。由于获得了我作品的整页截图，一些图像的高度比其他图像高得多。它不是允许显示相同大小的所有图像并允许在模态窗口中滚动，而是缩小图像以适应与所有其他图像相同的高度。这让它看起来很奇怪，因为一些图像被缩小了很多。我想让所有图像以相同的宽度显示，而那些需要它的图像允许滚动以查看图像的其余部分。我尝试使用溢出:滚动；在 .lightbox 上，但这没有帮助。我也尝试过溢出-y。我还想禁用后台页面滚动，以允许滚动集中在需要的图像上。

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
    
}

.lightbox .lb-image {
  display: block;
  min-width: 100%;
  height: auto;
  border-radius: 3px;  
  /* Image border */
  border: 4px solid white;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  *zoom: 1;
  width: 250px;
  min-height: 250px;
  margin: 0 auto;
  border-radius: 4px;
  /* Background color behind image.
     This is visible during transitions. */
  background-color: white;
}

Answer 1

Lightbox2 默认将计算的宽度和高度附加到图像和 .lb-outerContainer。但是您可以通过执行以下操作来覆盖它 -

.lb-outerContainer {
  width: 100% !important;
  height: auto !important;
}
.lightbox .lb-image {
  width: 100% !important;
  height: auto !important;
}

我不推荐这个，因为这会破坏这个插件的预期用途。我相信您会找到 lightbox2 的替代品来实现您正在寻找的东西。因此，您可以将此视为临时修复。

编辑:这里有一个 jsfiddle 可以查看它的工作情况。 https://jsfiddle.net/hsugx6wm/43/