Изменить размер слайдера с изображениями разных размеров - PullRequest
Новая
       6

Изменить размер слайдера с изображениями разных размеров

0 голосов
/ 21 января 2019

У меня есть мобильный первый слайдер с 3 типами изображений: высокий, горизонтально длинный и квадратный. Я хочу, чтобы по горизонтали длинное изображение определяло размер ползунка, а затем масштабировало и центрировало другие, чтобы соответствовать его размеру. Использование width:100%; height:auto; в моем коде CSS, чтобы изображения загружались с одинаковой шириной (100%) и разной высотой. Затем, используя JS, я хочу получить высоту изображения с максимальным соотношением ширина / высота и использовать ее как высоту всех изображений. И, наконец, используйте width:auto; height:100%; для изображений, чтобы все они соответствовали высоте. Вот код, который я использовал для достижения этой цели:

каждый слайд имеет следующий HTML: 

<div class="img">
      <img src="" alt="">
 </div>

Код CSS: 

 .img{
     position: relative;
     vertical-align: middle;
}

 .img img{
     width:100%;
     height:auto; 
     position: absolute;
     top: 0;  
     bottom: 0;  
     left: 0;  
     right: 0;  
     margin: auto;
}

JS код: 

        $(".img img").width = "100%";
        $(".img img").height = "auto";;
        var img_h , Imgs_heights=[] , ratio=[];
        slider.item.find(".img img").each(function(){
            Imgs_heights.push($(this).height());
            ratio.push($(this).width()/(($(this).height())));
        });
        img_h = Math.max.apply(Math,ratio);
        var i = r.indexOf(img_h );
        $(".img").height(Imgs_heights[i]);
        $(".img img").css("height", "100%");
        $(".img img").css("width", "auto");

Все работает отлично, но у меня проблема при изменении размера окна. При изменении размера высота изображения не изменяется и сохраняет высоту, рассчитанную ранее. И мне нужно обновить страницу, чтобы увидеть результат, который я хочу. Как я могу изменить высоту? Я добавил две первые строки в JS, чтобы он снова занял width:100%; height:auto; в окне с измененным размером, но это не работает.

Буду признателен за любую помощь.

1 Ответ

0 голосов
/ 21 января 2019

Если я правильно вас понимаю, вы можете просто использовать событие Javascript window.resize для пересчета размеров изображения?

Из Mozilla https://developer.mozilla.org/en-US/docs/Web/Events/resize

Событие изменения размера возникает, когда представление документа (окно) было изменен.

Ваш код может выглядеть примерно так: 

function resizeImages(){
   $(".img img").width = "100%";
   $(".img img").height = "auto";
   var img_h , Imgs_heights=[] , ratio=[];
   slider.item.find(".img img").each(function(){
       Imgs_heights.push($(this).height());
       ratio.push($(this).width()/(($(this).height())));
   });
   img_h = Math.max.apply(Math,ratio);
   var i = r.indexOf(img_h );
   $(".img").height(Imgs_heights[i]);
   $(".img img").css("height", "100%");
   $(".img img").css("width", "auto");
}

window.onload = function(){
  resizeImages();
};

window.onresize  = function(){
  resizeImages();
};
...