Question

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

上的行为

Answer 1

不幸的是，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/我们随时欢迎您编写自己的插件。

Answer 2

如Marko所说

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

它运作良好，但是我将！important添加到object-fit属性中。

如果您不想使用占位符图像，请添加以下内容，因为它会在重新计算尺寸之前隐藏图像周围出现的黑/灰色框。

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

Answer 3

感谢。我在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;
}

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

Answer 4

只需在CSS中放入“对象适合：包含”：

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

它将解决您的问题

Answer 5

我遇到了同样的问题，试图在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;
}

Answer 6

使用 getimagesize php function 得到 width 和 height 宽度在 index 0 上，高度在 index 1 上

如果您使用 spatie 存储图像，请使用 $image->url 或 $image->getUrl() 获取路径

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

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

Photoswipe图像大小/比例

6 个答案: