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

【问题标题】：Resize slider with different sized images使用不同大小的图像调整滑块大小
【发布时间】：2019-01-21 00:18:31
【问题描述】：

我有一个带有 3 种图像类型的移动优先滑块：高、横长和方形。我希望水平长图像确定滑块的大小，然后缩放和居中其他滑块以适应它的大小。在我的 CSS 代码中使用width:100%; height:auto;，这样图像将以相同的宽度（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;，但它不起作用。

我将不胜感激。

【问题讨论】：

标签： javascript jquery css slider resize

【解决方案1】：

如果我的理解正确，您可以简单地使用 Javascript window.resize 事件重新计算图像大小吗？

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

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

【讨论】：