Laravel Photosweep图像大小/比率

我正在使用一个Laravel网站，包括Photosweep。 我的问题是：当我点击一张照片时，它会弹出一个预定义的高度和宽度（在我的例子中是764X480）。我希望我的照片以原始比例打开，而不是以预定义的比例打开（因为我有一些全景图）。有办法解决这个问题吗？是否可以设置另一个尺寸？您可以在编辑上检查行为

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

原始答案

不幸的是，Photosweep没有自动检测图像尺寸的选项。这不是一个bug或者一个缺失的特性。这是作者的首选，以保持其小而干净的纯javascript代码。这里是作者的建议

你可以试试这个。（来源：）

var项目=[
{src:'http://........，w:0，h:0}，
{src:'http://........'，w:0，h:0}
];
var gallery=新的Photosweep（…）；
gallery.listen（'gettingData'，函数（索引，项）{
if（item.w<1 | | item.h<1）{//未知大小
var img=新图像（）；
img.onload=function（）{//将在加载后获取大小
item.w=this.width；//设置图像宽度
item.h=this.height；//设置图像高度
gallery.invalidateUrItems（）；//重新编辑项目
gallery.updateSize（true）；//重新编辑项目
}
img.src=item.src；//让我们下载图像
}
});
gallery.init（）；

我个人还没有测试过它，但作者通过在代码下面发表评论来认可它。在github页面的“问题”选项卡下，还有其他一些来自开发人员的解决方案

此外，你还有其他几种选择

1.最脏的溶液。这对于几个图像来说可能已经足够好了，但是如果您有大约10秒的图像，那么等待init的时间就太长了

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

2.您可以使用jQuery插件来检测是否加载了图像。您可以使用尺寸为100x100的小图像占位符在文档上初始化Photosweep ready。然后根据插件的流程，使用Photosweep API更新加载的图像

---

3.最先进的解决方案。上面提到的imagesLoaded插件使用jquery的延迟对象。欢迎您编写自己的插件。

谢谢。我的JS真的不够好。我找到了解决办法

我替换了以下行：

// create slide object
item = {
  src: linkEl.getAttribute('href'),
  w: parseInt(size[0], 10),
  h: parseInt(size[1], 10)
};

借

但是我不得不说，我不知道10和12是干什么的

为了保持这个比例，我只找到了一个CSS技巧：

我在photosweep.css中添加了一行，如下所示：

.pswp img {
  max-width: none;
}

现在是：

.pswp img {
  max-width: none;
  height: auto !important;
}

这似乎不是解决问题的最佳方法，但我得到了我需要的结果。

只需输入CSS“object fit:contain”：

它将解决您的问题

，正如马尔科所说

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

它工作得很好，但我要补充一点！对于对象拟合属性很重要

另外，如果不希望使用占位符图像，请添加以下内容，因为在重新计算大小之前，它将隐藏图像周围显示的黑色/灰色框

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

---

在我的Cargo Collective站点中，我试图调整Photosweep图像的大小时遇到了同样的问题。我在自定义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

获取

宽度

和

高度

宽度在

索引0上

高度在

索引1上

如果使用Spatial存储图像，请使用

$image->url

或

$image->getUrl（）获取路径

数据大小属性如下所示，如果您的图像存储在
storage/app/public/
下，请使用
public\u path
以避免错误，或者将图像的完整路径放在
storage/app/public/
下

data-size="{{getimagesize(public_path($img->url))[0]}}x{{getimagesize(public_path($img->url))[1]}}"

10和12是数学的基础。10是默认值，但这听起来与您的问题无关，至少我是这么认为的，我的意思是用12替换10。不管怎样，如果你对结果感到满意，那就没什么可说的了。
.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;
}

data-size="{{getimagesize(public_path($img->url))[0]}}x{{getimagesize(public_path($img->url))[1]}}"