Question

我有一个移动的第一滑块，其中包含3种类型的图像：高，水平长和正方形。我希望水平的长图像确定滑块的大小，然后缩放并居中放置其他大小以适合其大小。在我的CSS代码中使用server.js，以便将图像以相同的宽度（100％）和不同的高度加载。然后使用JS，我想获取具有最大宽度/高度比的图像的高度，并将其用作所有图像的高度。最后，对图像使用width:100%; height:auto;，以便所有图像都适合高度。这是我用来实现此目的的代码：

每张幻灯片都具有以下HTML：

width:auto; height:100%;

CSS代码：

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

JS代码：

 .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");，但它不起作用。

我将不胜感激。

Answer 1

如果我对您的理解正确，能否简单地使用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();
};

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

1 个答案: