放大图像时如何消除图像上的随机跳跃

Question

当我按下一张图片时，它应该会放大成一张更大的图片。但是，我通过将高度更改为 90vh 来更改大小，因此图像不会完全接触屏幕的底部和顶部。但是，现在当我按下图像时，您可以看到它在扩展图像之前向上移动了 10vh。有人可以帮我删除那个跳转吗？

    .pswp {  height:100vh !important;
margin:auto!important;top:0 !important;
    bottom:0 !important;
}

.pswp__scroll-wrap {
height:90vh !important;margin:auto!important;top:0 !important;
    bottom:0 !important;
}

Answer 1

要解决退回问题，请将 .pswp__scroll-wrap 选择器下的 height: 90vh !important 行更改为 100vh。像这样：

.pswp__scroll-wrap {
    height: 100vh !important;
    margin: auto !important;
    top: 0 !important;
    bottom: 0 !important;
}

如果您在移除弹跳错误的同时仍希望在图像的顶部和底部有填充，则缩小缩略图（不用于滑块的图像）以匹配完整尺寸的图像（在其上重复）通过滑块并按比例放大）或向图像添加某种填充。

另一种解决方法是在 .pswp__scroll-wrap:before 和 .pswp__scroll-wrap:after 中添加填充块，如下所示：

.pswp__scroll-wrap:before,
.pswp__scroll-wrap:after {
    display: block;
    content: "":
    padding: 50px; // Set this to your preferred padding!
    background: #ffffff; // also add transition for background, so it fades in nicely!
}

我找不到您在缩放之前定义幻灯片缩略图大小的代码，但我的猜测是调整它的大小也有助于保持填充，同时不会出现弹跳问题。

整个问题都围绕着您在调整原始图像的副本大小时将那些 90vh 隐藏起来。

Answer 2

可能值得撤消您应用到它的任何样式，看看是否开箱即用地支持这种功能：

使用 barsSize 选项： https://photoswipe.com/documentation/options.html

或 parseVerticalMargin 事件： https://photoswipe.com/documentation/api.html

通过选择 All Controls 并将下面的样式添加到 hide/disable UI，我能够在 PhotoSwipe demo site 的图像顶部和底部实现间隙] 与 CSS:

.pswp__ui {
    opacity: 0!important;
    pointer-events: none;
}

将它与 barsSize 选项结合使用应该允许您自定义图像和浏览器视口之间的差距有多大，尽管您可能无法使用 vh作为一个单位，并且需要使用 Math.round(window.innerHeight*.1) 之类的东西来计算 10% 视图高度，或者改用像素值。

还值得研究文档中的 Custom HTML in Slides 主题，因为您可以在图像前后添加一个间隔符 div。

对于 CSS 仅修复：

如果您无权更改 PhotoSwipe 的初始化方式，那么下面的 CSS 会使您网站上的动画不那么跳动，但是，它确实会使图像先达到全高片刻，在过渡到 90vh.

之前

删除：

.pswp__scroll-wrap {
    height: 90vh !important;
}

添加：

.pswp__scroll-wrap {
    transition: transform 222ms cubic-bezier(.4,0,.22,1);
}

.pswp--animated-in .pswp__scroll-wrap {
    transform: scale(.9);
}

放大图像时如何消除图像上的随机跳跃

How to remove random jump on image when zooming in on it

html

css

height

对于 CSS 仅修复：