我正在使用 Laravel 网站，包括 Photoswipe。 这是我的问题：当我点击一张照片时，它会弹出一个预定义的高度和宽度（在我的例子中是 764X480）。我希望我的照片以原始比例打开，而不是预定义的（因为我有一些全景图）。有没有办法解决这个问题？是否可以设置其他尺寸？您可以检查http://www.pixelkomando.com/paysages上的行为
【问题讨论】：
标签： laravel photoswipe
编辑
我用 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 张图片，则等待初始化会花费太多时间。
在页面上嵌入您的全尺寸图片。这将使您能够在窗口加载时访问图像尺寸，以便您可以构建具有实际尺寸的图像数组，然后初始化 PhotoSwipe。
2. 您可以使用像http://imagesloaded.desandro.com/ 这样的jQuery 插件来检测图像是否已加载。您可以使用尺寸为 100x100 的小图像占位符在准备好的文档上初始化 PhotoSwipe。然后根据插件的流程，使用 PhotoSwipe API 更新加载的图片。
3. 最先进的解决方案。我上面提到的 imagesLoaded 插件使用 jquery 的延迟对象。 http://api.jquery.com/category/deferred-object/ 随时欢迎您编写自己的插件。
【讨论】：
谢谢。我在JS方面真的不够好。我找到了解决办法。
我替换了以下几行：
// create slide object
item = {
src: linkEl.getAttribute('href'),
w: parseInt(size[0], 10),
h: parseInt(size[1], 10)
};
通过
// create slide object
item = {
src: linkEl.getAttribute('href'),
w: parseInt(size[0], 12),
h: parseInt(size[1], 12)
};
但我不得不说我不知道 10 和 12 是干什么用的。
为了保持比例，我只发现了一个 CSS 技巧：
我在 photoswipe.css 中添加了这样一行：
.pswp img {
max-width: none;
}
现在是：
.pswp img {
max-width: none;
height: auto !important;
}
这似乎不是解决问题的最佳方法，但我得到了我需要的结果。
【讨论】：
只需放入 CSS “object-fit: contains”：
.pswp img {
max-width: none;
object-fit: contain;
}
它会解决你的问题
【讨论】：
正如马可所说
.pswp img {
max-width: none;
object-fit: contain;
}
效果很好，但我会在 object-fit 属性中添加 !important。
此外，如果您不想使用占位符图像，请添加以下内容，因为它会在重新计算大小之前隐藏图像周围出现的黑色/灰色框。
.pswp__img--placeholder--blank{
display: none !important;
}
【讨论】：
我在尝试调整 Cargo Collective 网站中的 PhotoSwipe 图像大小时遇到了同样的问题。我在自定义 CSS 中添加了以下内容，并且效果很好：
.pswp img {
object-fit: contain !important;
max-height: 400px !important;
max-width: auto !important;
margin-top: 100px;
margin-bottom: 100px;
}
我还使用以下内容将背景更改为白色：
.pswp__bg {
background-color: #fff !important;
}
.Pswp_bg image-zoom-background {
background-color: #fff !important;
}
【讨论】：
使用getimagesize php function 得到width 和height 宽度在index 0 上，高度在index 1 上
如果您使用 spatie 存储图像，请使用 $image->url 或 $image->getUrl() 获取路径
data-size 属性应如下所示，如果您的图像存储在storage/app/public/ 下或放置图像的完整路径，请使用public_path 以避免错误
data-size="{{getimagesize(public_path($img->url))[0]}}x{{getimagesize(public_path($img->url))[1]}}"
【讨论】：