Как сделать так, чтобы этот образ JS сравнивался? - PullRequest
Новая
       9

Как сделать так, чтобы этот образ JS сравнивался?

0 голосов
/ 11 мая 2018

Я делал сравнение изображений JS на основе этого примера .И что бы я ни делал, это не отвечает (я не могу использовать какие-либо рамки для этого).Я попытался изменить ширину .img-comp-slider до 100%, например: 

.img-comp-slider {
width: 100%;
height: /custom height here/;
}

, а также .img-comp-img img.Но это не помогает, когда экран изменен.

Я подозреваю, что проблема может заключаться в коде JS, но я не уверен, потому что я не очень хорош в этом.

Может кто-нибудь мне помочь?Есть ли подход, который может сделать это отзывчивым?Спасибо!

1 Ответ

0 голосов
/ 11 мая 2018

Вот ваше решение img сравнить отзывчивость. 

.img-comp-container {
  max-width: 100vw;
  height: auto;
}
.img-comp-container img {
  max-width: 100vw;
  height: auto;
}

Необходимый JavaScript: 

$( window ).resize(function() {
    width = $(".img-comp-container").find('img').width()
    height = $(".img-comp-container").find('img').height();
    $(".img-comp-slider").css( "top", height/2 );
    $(".img-comp-slider").css("left" ,width/2);

});

См. Скрипку: https://jsfiddle.net/mutafaf/24nd3wo6/

...