调整滑块图像的大小以适应设备屏幕

问题描述：

我正在使用引导程序传送带，并且希望将其修改为始终滑块适合窗口（或任何其他设备）。这里是我的解决方案：
调整滑块图像的大小以适应设备屏幕

如果imageRatio > winRatio然后
stretch images height to it's max
其他
stretch images width to it's max

当图像比例比窗口比我更多，增加max-height:100%;max-width:none;图像和时窗比值大于图像比我大的添加max-width: 100%; max-height: none;

长话短说，所有这些东西的作品，但不知何故，当我调整窗口图像比例和窗口比例相等！这里是`console.log（winRatio，imgRatio）的结果;

1.0709046454767726 1.5051546391752577 /* this is expected results but */ 
1.1124694376528117 1.1124694376528117 /* when i stop resizing */

我的HTML：

<div class="row-fluid"> 

    <div id="top-slider" class="carousel slide"> 
     <!-- Carousel pattern mask --> 
     <div class="mask"></div> 

     <!-- Carousel items --> 
     <div class="carousel-inner"> 
      <div class="active item"><img src="img/slider/slide01.jpg" alt="Slide 01" /></div> 
      <div class="item"><img src="img/slider/slide02.jpg" alt="Slide 02" /></div> 
      <div class="item"><img src="img/slider/slide03.jpg" alt="Slide 03" /></div> 
     </div> 

     <!-- Carousel nav --> 
     <div class="carousel-control"> 
      <a class="left" href="#top-slider" data-slide="prev"></a> 
      <a class="right" href="#top-slider" data-slide="next"></a> 
     </div> 
    </div> 

</div> 
<!-- /site top slider -->

的Javascript：

// DOM Ready 
jQuery(document).ready(function($){ 

    /* strech homepage top slider's slides to fit device screen 
    ------------------------------------------------------------------- */ 
    function fitSlider() { 
     var wH = $(window).height() - $('#top-header').height(); 
     var wW = $(window).width(); 
     var winRatio = wW/wH; 
     var imgH = $('#top-slider .carousel-inner').height(); 
     var imgW = $('#top-slider .carousel-inner').width(); 
     var imgRatio = imgW/imgH; 
     console.log(winRatio, imgRatio); 

     $('#top-slider').css('height', wH); 

     if (imgRatio > winRatio) 
     { 
      $('#top-slider .carousel-inner .item img').addClass('fit-height'); 
     } 
     else 
     { 
      $('#top-slider .carousel-inner .item img').removeClass('fit-height'); 
     } 
    } 

    // On window resized fire this event 
    $(window).bind('resize',function() { 
     //Update slider 
     fitSlider(); 
    }); 
    // On window loaded fire this event 
    $(window).load(function() { 
     fitSlider(); 
    }); 
});

答

第一次你的脚本运行，图像的大小变化。所以下一次你拿起它，你会得到你设置的图像的大小，而不是原始的初始高度。您必须将图像的初始尺寸存储在某个全局变量中，并将窗口尺寸与它们进行比较。

将这些移入window.load函数中。并使这些变量成为全局的。

var imgH = $('#top-slider .carousel-inner').height(); 
var imgW = $('#top-slider .carousel-inner').width();

调整滑块图像的大小以适应设备屏幕

相关推荐