如何使图像拉伸以填充PhotoSwipe中的可用区域
我希望使用PhotoSwipe在我的响应式网站上显示每篇文章中的所有图片，就像你在http://dailymail.co.uk中点击或点击内容中的图片时得到的图库一样。它的主要用途是为用户提供一个大的图片视图，并允许他们在移动设备上放大这些图片，而不需要离开文章。
PhotoSwipe在这方面做得很好。我的JS梳理文章内容，并从找到的图像构建PhotoSwipe数组。但有一个问题:我文章中的一些图片很小。这在手机上不算太糟，但在桌面上，我很可能会在一个大的黑色画廊区域中间看到一张小图片。为了解决这个问题，“每日邮报”总是把图片拉伸到适合画廊的区域--虽然有些照片有点难看，但它的视野很大。
有没有什么方法可以选择性地拉伸PhotoSwipe图库中的小图像，以填充更多的可用区域？一个老版本的PhotoSwipe曾经有一个imageScaleMethod选项，可以让你根据屏幕尺寸调整图像:最新版本v4.0.7有什么类似的功能吗？
这里有一个CodePen，它应该说明我正在讨论的内容-第三个图像是我想要扩展一点的图像。我在这个例子中的幻灯片是：
var items = [
{
src: 'http://lorempixel.com/1000/750/cats/',
w: 1000,
h: 750,
title: 'Fairly big cat'
},
{
src: 'http://lorempixel.com/1200/900/cats/',
w: 1200,
h: 900,
title: 'Another quite big cat'
},
{
src: 'http://lorempixel.com/200/320/cats/',
w: 200,
h: 320,
title: 'Small cat'
}
];
回答 3
Stack Overflow用户
发布于 2015-04-16 16:30:21
起初，我认为可以通过添加一个beforeChange侦听器来解决这个问题，该侦听器可以放大每个图像，使其适合进入的显示区域。方便的是，PhotoSwipe中的每个项目都有一个属性fitRatio，该属性表示适合显示区域所需的缩放比例。
在我的CodePen的第34行，就在gallery.init();之前，我添加了：
gallery.listen('beforeChange', function () {
gallery.zoomTo(gallery.currItem.fitRatio, {x: gallery.viewportSize.x / 2, y: gallery.viewportSize.y / 2}, 1);
});它将当前图片缩放到合适的比例，以适合图库，以幻灯片的x和y中心为中心，持续时间为1微秒。(有关zoomTo方法的详细信息，请参阅PhotoSwipe API documentation。)
但是放大会停用桌面上的“点击滑动”操作，我想保留它。
因此，我测量浏览器窗口并设置图像的宽度和高度以匹配。你必须考虑图像是否是横向的还是纵向的，如果用户调整浏览器窗口的大小，你需要更新尺寸。
var measureWindow = function () {
windowW = $window.width();
windowH = $window.height();
};
measureWindow();
// If image is landscape or square, set width to window width and height to width * ratio
// If image is portrait, set height to window height and width to height / ratio
var getImageDimensions = function (w, h) {
var ratio = h / w;
if (w >= h) {
return {
width : windowW,
height: windowW * ratio
}
} else {
return {
width : windowH / ratio,
height: windowH
}
}
};然后，当我将每个图像添加到我的数组中时，我这样做
var dimensions = getImageDimensions(width, height),
o = {
el : value,
src: src,
w : dimensions.width,
h : dimensions.height
};其中o是表示图像的对象。
我还向我的图库添加了一个侦听器，以便在用户调整窗口大小时再次调用measureWindow。这将更新windowW和windowH。
var debouncedMeasure = _.debounce(measureWindow, 250);
gallery.listen('beforeResize', function () {
debouncedMeasure();
});严格地说，当这种情况发生时，我应该更新图像数组中的尺寸，以便新图像的大小正确地调整为新的窗口尺寸。
这是我最终使用的the solution --你需要查看这个full preview，看看它是如何工作的。
编辑
为了从PhotoSwipe获得最好的结果，我发现只要页面处于活动状态，我就必须将内容隐藏在页面的其余部分。当我打开它时，我会这样做
html.addClass('photoswipe-active');
gallery.listen('close', function () {
html.removeClass('photoswipe-active');
});并设置可见性:当该类存在时隐藏在其他内容上。如果页面中有任何东西导致重新绘制(比如动画gif)，它可能会导致PhotoSwipe的swipe和pinch缩放手势出现卡顿。隐藏内容可以使内容保持流畅。
当我尝试在调整大小时测量PhotoSwipe元素时，我也遇到了性能问题--看起来测量窗口要好得多。
Stack Overflow用户
发布于 2015-05-31 23:36:36
我使用的是wordpress插件，并添加了以下css。(然后我将wordpress中的缩略图大小设置为0 0。)
.photoswipe_gallery_holder {
width: 101%;
margin-left: -5px;
}
.photoswipe_gallery {
width: 100%!important;
margin-top: 20px!important;
margin-bottom: 20px!important;
margin-right: 0px!important;
margin-left: 0px!important;
padding-bottom:0px!important;
}
.photoswipe_gallery figure {
width: 100%!important;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
padding: 5px!important;
}
.photoswipe_gallery figure img {
width: 100%!important;
height: auto!important;
padding: 0px!important;
}
.photoswipe_gallery figure a {
width: 100%!important;
height: auto!important;
}
@media screen and (min-width: 480px) {
.photoswipe_gallery figure {
width: 50%!important;
}
}
@media screen and (min-width: 750px) {
.photoswipe_gallery figure {
width: 25%!important;
}
}"holder“div是为了让我们可以稍微移动一些东西来排成一列。如果你使用它，你需要在父div上设置overflow: hidden；。在响应站点上，我的父div的宽度最大是968px。
Stack Overflow用户
发布于 2018-11-14 16:25:53
如果你看一下源代码，你会发现它在某个时候是/曾经是一个计划中的功能，因为它有这样的部分：
// not fully implemented yet
scaleMode: 'fit' // TODO这确实没有多大帮助，但我只是说这是一个有趣的细节。
我对这个问题的解决方案是这样的:只需将data-size属性设置为一个大于大多数常见屏幕尺寸的大小。当我从PHP生成标记时，我只是简单地放入如下内容：
data-size="<?php echo intval($img_x * 1.5); ?>x<?php echo intval($img_y * 1.5); ?>"实际所需的数量在您的情况下可能会有所不同，但我已经将我的所有图像设置为固定大小，1.5倍的乘数足以让它们填满大多数屏幕。
这不是一个“正确”的解决方案，然而，它对客户端来说是简单、快速和轻量级的(不需要额外的javascript魔力)。与上面建议的复杂的JavaScript重型解决方案相比，这对简单的项目可能是一个好处。
事实上，我使用的是MobileDetect，所以我只增加桌面的图像大小，因为我的原始图像适用于手机(和平板电脑)。
data-size="<?php echo intval($img_x * ($mobile_detect->isMobile() ? 1 : 1.5)); ?>x<?php echo intval($img_y * ($mobile_detect->isMobile() ? 1 : 1.5)); ?>"您需要根据自己的需要规划大小，并且可能需要为每个图像使用不同的乘数，但我的观点是，大小操作可以在图库标记中轻松完成，而不是试图覆盖JavaScript中的值或在某些事件后强制缩放PhotoSwipe (我已经尝试过并或多或少地很好地切换图像，但它在打开PhotoSwipe时会导致故障)。
https://stackoverflow.com/questions/29678802
复制
腾讯云开发者
