javascript - Photoswipe 缩略图图像大小问题 - 尝试调整缩略图的大小以获得统一的外观

Question

我在使用 Photoswipe 时遇到图像大小问题。基本上，这就是我的照片库现在的样子: http://img4.imageshack.us/img4/8431/problemeq.png

我插入的照片之间有空隙。我基本上不使用缩略图，而是传入原始照片。但我尝试将照片的大小调整为缩略图大小，但它所做的只是保持相同的尺寸并降低了所显示照片的质量。

我希望它看起来像这样而不挤压照片: http://img651.imageshack.us/img651/9199/exampleiq.png

我将高度设置为固定为 200 像素而不是“自动”，因此在更改窗口分辨率时它确实会拉伸(stretch)照片。

我错过了什么？我认为这不是 Photoswipe 问题；很可能是 CSS，但我不知道要更改什么。任何帮助将不胜感激。谢谢!

附言抱歉提供链接，但我还不能发布图片。

Answer 1

这似乎是一个被遗弃的问题，但它让我得到了答案。此外，没有看到 OP 代码有点棘手，但假设它是相当未受影响的 photoswipe，这是我的答案......

简而言之，替换库存 div.gallery-item、div.gallery-item a 和 div.gallery-item img 与这些，并添加一点 img 调整。

div.gallery-item {
     float:left;
     width: 33.3333333%;
     padding-bottom: 33.3333333%;
     position: relative;
}

div.gallery-item a {
    position:absolute;
    width:100%;
    height:100%;
    background:#fff;
    text-align:center;
    border:1px solid #3c3c3c;
}
div.gallery-item img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

img{
    max-height:100%;
    max-width:100%;
}

Here's a Fiddle (不是 photoswipe，而是它的主要要点)