Photoswipe图像大小/比例

Question

我使用的是Laravel网站，包括

Photoswipe

..。这就是我的问题:当我点击一张照片时，它会弹出一个预定义的高度和宽度(在我的例子中是764X480)。我希望我的照片以其原始比例打开，而不是使用预定义的比例(因为我有一些全景图)。有没有办法解决这个问题？有没有可能设定另一种尺寸？你可以在

http://www.pixelkomando.com/paysages

Answer 1

编辑

我用jQuery为那些不想处理“编码”(讽刺)的人写了一个小包装器。

https://ergec.github.io/jQuery-for-PhotoSwipe/

原始答案

不幸的是，PhotoSwipe没有自动检测图像尺寸的选项。这不是一个bug，也不是一个缺失的特性。这是作者的偏好，让它保持小巧和干净的纯javascript代码。作者的建议在这里

http://photoswipe.com/documentation/faq.html

你可以试试这个。(来源：

https://github.com/dimsemenov/PhotoSwipe/issues/796

)

var items = [ 
  { src: 'http://........', w:0, h:0 },
  { src: 'http://........', w:0, h:0 }
];

var gallery = new PhotoSwipe( ..... );
gallery.listen('gettingData', function(index, item) {
        if (item.w < 1 || item.h < 1) { // unknown size
        var img = new Image(); 
        img.onload = function() { // will get size after load
        item.w = this.width; // set image width
        item.h = this.height; // set image height
           gallery.invalidateCurrItems(); // reinit Items
           gallery.updateSize(true); // reinit Items
        }
    img.src = item.src; // let's download image
    }
});
gallery.init();

我个人没有测试过它，但作者通过在代码下面的注释来认可它。在他们的github页面上的Issues选项卡下，有一些来自开发人员的其他解决方案。

此外，您还可以选择其他一些选项

1.

最脏的解决方案。这对于几个图像来说可能已经足够好了，但是如果你有大约10个图像，那么等待init就会花费太多的时间。

在页面上嵌入您的全尺寸图像。这将使您能够访问窗口加载时的图像尺寸，以便您可以构建具有实际尺寸的图像数组，然后初始化PhotoSwipe。

2.

您可以像这样使用jQuery插件

http://imagesloaded.desandro.com/

来检测是否加载了图像。您可以使用尺寸为100x100的小图像占位符在准备好的文档上初始化PhotoSwipe。然后根据插件的流程，使用PhotoSwipe接口对加载的图片进行更新。

3.

最先进的解决方案。我上面提到的imagesLoaded插件使用了jquery的延迟对象。

http://api.jquery.com/category/deferred-object/

随时欢迎您编写自己的插件。

Answer 2

只需输入CSS "object-fit: contain"：

.pswp img {
    max-width: none;
    object-fit: contain;
}

它会解决你的问题

Answer 3

正如马尔科所说

.pswp img {
    max-width: none;
    object-fit: contain;
}

它工作得很好，但我要补充的是！对object-fit属性很重要。

此外，如果您不希望使用占位符图像，则添加以下内容，因为它会在重新计算大小之前隐藏图像周围出现的黑色/灰色方框。

.pswp__img--placeholder--blank{
    display: none !important;
}