使用不同大小的图像调整大小的滑块

Question

I have a mobile first slider with 3 types of images: tall, horizontally long and square. I want the horizontally long image determine the size of slider and then scale and center other ones to fit it's size. Using width:100%; height:auto; width:100%; height:auto; in my CSS code so images will be loaded with same width(100%) and different heights. Then using JS I want to get height of the image which has max width/height ratio and use it as the height of all images. And in the end using width:auto; height:100%; width:auto; height:100%; for images so all of them will fit the height. Here is the code I used to achieve this:

every slide has the following HTML:

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

CSS code:

 .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 code:

        $(".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");

Everything works just fine but I have problem when I resize the window. In resizing the height of images does not change and keeps the height calculated before. And I need to refresh page to see the result I want. How can I get the height to change? I added the two first lines in JS to force it take width:100%; height:auto; width:100%; height:auto; again in resized window but it does not work.

I will appreciate any help.

Answer 1

If I'm understanding you correctly, can you simply use the Javascript window.resize event to recalculate the image sizes?

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

The resize event fires when the document view (window) has been resized.

Your code might become something like:

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();
};