jQuery 灯箱 2 在随机图像中显示边框

Question

我已经使用了 jQuery Lightbox 2 并且其工作正常，符合要求。

但是，它在一些随机图像中显示边框。这是屏幕截图。

这是他们正在使用的图片的灯箱 css。

<img class="lb-image" src="http://mywebsite/img/myimage.png">

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: 3px;
  border: 4px solid white;
}

我发现这一行 border: 4px solid white; 导致了这个问题。如果我评论此行，则不会显示边框。

但是，如果我不评论这一行，则不会对所有图像都发生这种情况。在某些图像中，它工作正常，有边框。

我还检查了图像的上传方式，这是有问题的完整图像。（但是，我猜这是发生的随机图像）。

所以在这里我很困惑在这种情况下我应该做什么才能同时适用于这两种情况。我应该删除边框吗？或者我可以申请的任何其他东西。

请指导我。

Answer 1

我不认为边框是随机显示的..只是因为它有时是白色的，所以它会与图像融为一体。尝试将边框颜色更改为不同的颜色以验证它。

border: 4px solid red;

您可能还想检查 LightBox 的宽度和高度 - 看起来它可能被硬编码为正方形 - 这意味着如果原始图像不是正方形 (1x1) 那么当边框打开时你会看到一些额外的间隙.

Answer 2

如果可能，将 .lightbox 的高度和宽度属性设置为自动。

如果这不起作用，那么试试这个。由于图像是透明的，因此白色背景来自 .lightbox 元素。 .lightbox 元素的父元素有 dark/black 背景，您可以看到 border-right 和 border-bottom。发生这种情况是因为您的元素具有固定的 width/height 排列。所以把.lightbox元素的父元素的background-color改成white.

如果你做一个jsfiddle会更好，因为像这样很难调试它。

jQuery 灯箱 2 在随机图像中显示边框

jQuery Lightbox 2 showing border in random images

html

css

jquery

lightbox2