Parallax изображение отзывчивое изменение размера ⇐ Javascript

[Anonymous]

У меня есть страница Parallax, которая работает (достаточно хорошо) на компьютерных мониторах: высота изображений составляет 100 вм, а ширина составляет 100%. Когда я смотрю на одну и ту же страницу на телефоне, сама параллакс работает, но высоты изображений больше не 100В, вместо этого они довольно маленькие. Высота 100 вх является приоритетом, поэтому я не против, если стороны изображений отрезаны, но я не могу понять, как это сделать.
Вот с чем я работал: < /p>


Collection


Bespoke Gallery


Detail

< /code>
с этим JS (хотя я не могу это влиять на проблему так или иначе) < /p>
$('.img-parallax').each(function(){
var img = $(this);
var imgParent = $(this).parent();
function parallaxImg () {
var speed = img.data('speed');
var imgY = imgParent.offset().top;
var winY = $(this).scrollTop();
var winH = $(this).height();
var parentH = imgParent.innerHeight();
var winBottom = winY + winH;

if (winBottom > imgY && winY < imgY + parentH) {
var imgBottom = ((winBottom - imgY) * speed);
var imgTop = winH + parentH;
var imgPercent = ((imgBottom / imgTop) * 100) + (50 - (speed * 50));
}
img.css({
top: imgPercent + '%',
transform: 'translate(-50%, -' + imgPercent + '%)'
});
}
$(document).on({
scroll: function () {
parallaxImg();
}, ready: function () {
parallaxImg();
}
});
});
< /code>
и CSS: < /p>
.hppblock{
width: 100%; /*I've also tried width: auto*/
height: 100dvh;
position: relative;
overflow: hidden;
}
.hppblock h1{
position: relative;
display: block;
text-align: center;
color: #D0BFAD;
font-size:7.5vw;
margin: 0;
top: 50%;
transform: translateY(-50%);
}
.img-parallax {
width: 100vmax;
z-index: -1;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,0);
pointer-events: none
}
< /code>
Я тоже пытался возиться с этими настройками, но все стало странно быстро: < /p>
background-position: center;
background-repeat: no-repeat;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
< /code>
И это также победило все: < /p>
@media screen and (max-width: 800px) {
.hppblock{
object-fit: cover;
display: flex;
background-position: center;
background-repeat: no-repeat;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
< /code>
Любая помощь будет высоко оценена, так как я чувствую, что хожу по кругу.


Подробнее здесь: https://stackoverflow.com/questions/796 ... ive-resize