Как убрать случайный скачок на изображении при его увеличении

Question

когда я нажимаю на изображение, оно должно взорваться в большую картинку. Тем не менее, я изменил размер, чтобы изображение не полностью касалось нижней и верхней части экрана, изменив высоту на 90vh. Тем не менее, теперь, когда я нажимаю на изображение, вы можете увидеть, что оно сместилось на 10vh перед расширением изображения. Может кто-нибудь помочь мне убрать этот прыжок?

https://darrientu.com/

    .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

Может быть стоит отменить любой стиль, который вы применили к нему, и посмотреть, поддерживается ли этот вид функциональности из коробки:

Использование опции barsSize: https://photoswipe.com/documentation/options.html

Или событие parseVerticalMargin: https://photoswipe.com/documentation/api.html

Мне удалось достичь зазора вверху и внизу изображения на PhotoSwipe демонстрационный сайт , выбрав All Controls и добавив нижеприведенные стили, чтобы скрыть / отключить пользовательский интерфейс с помощью CSS:

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

Использование этого в сочетании с параметром barsSize позволит вам чтобы определить, насколько велик разрыв между изображением и окном просмотра браузера, хотя вы, вероятно, не сможете использовать vh как единицу, и вам нужно будет использовать что-то вроде Math.round(window.innerHeight*.1) для расчета 10% высоты просмотра, или вместо этого используйте значение в пикселях.

Также стоит посмотреть Custom HTML в слайдах topi c в документации, так как вы можете добавить пробел div до и после вашего изображения.

---

Только для CSS исправления:

* 1 033 * Если у вас нет доступа, чтобы изменить инициализацию PhotoSwipe, то CSS ниже делает анимацию менее резкой на вашем сайте, однако, она на мгновение делает изображение go на полную высоту на мгновение, прежде чем переход к 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);
}

Answer 2

Чтобы устранить отскок, измените строку height: 90vh !important в селекторе .pswp__scroll-wrap на 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 под оберткой при изменении размера дубликата исходного изображения.