照片滑动图像大小/比例

Question

我正在使用 Laravel 网站，包括Photoswipe。这是我的问题：当我单击照片时，它会以预定义的高度和宽度（在我的情况下为 764X480）弹出。我希望我的照片以原始比例打开，而不是预定义的（因为我有一些全景图）。有没有办法解决这个问题？是否可以设置其他尺寸？您可以在http://www.pixelkomando.com/paysages上检查行为

Answer 1

只需放入 CSS “object-fit: contains”：

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

它会解决你的问题

Answer 2

编辑

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

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

原答案

不幸的是，PhotoSwipe 没有自动检测图像尺寸的选项。这不是错误或缺失的功能。这是作者的偏好，保持小而干净的纯 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 页面上的问题选项卡下还有其他一些解决方案。

你也有其他几个选择

1.最脏的解决方案。这对于几个图像来说可能已经足够了，但是如果您有大约 10 个图像，则等待 init 将花费太多时间。

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

2.你可以使用像http://imagesloaded.desandro.com/这样的 jQuery 插件来检测图像是否被加载。您可以使用尺寸为 100x100 的小图像占位符在准备好的文档上初始化 PhotoSwipe。然后根据插件的流程，使用PhotoSwipe API 更新加载的图片。

3.最先进的解决方案。我上面提到的imagesLoaded 插件使用jquery 的延迟对象。http://api.jquery.com/category/deferred-object/随时欢迎您编写自己的插件。