Jssor Images Too Zoomed

我正在使用the Jssor library來創建圖像滑塊。我將$ FillMode設置爲4，以便圖像適合容器，但不起作用。這是圖像的一個樣子：Jssor Images Too Zoomed

enter image description here

所以我想盡其他模式，並沒有看到任何變化。

這裏是我的代碼：

<!DOCTYPE html> 
<html> 
    <head> 
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.11.0.min.js"></script> 
    <script type="text/javascript" src="{{ STATIC_URL }}js/jssor.core.js"></script> 
    <script type="text/javascript" src="{{ STATIC_URL }}js/jssor.utils.js"></script> 
    <script type="text/javascript" src="{{ STATIC_URL }}js/jssor.slider.js"></script> 
    <script type="text/javascript" src="{{ STATIC_URL }}js/jssor.slider.min.js"></script> 
    <script type="text/javascript" src="{{ STATIC_URL }}js/jssor.slider.mini.js"></script> 
</head> 

<body> 
    <div id="main"> 
     <h1>Swipe right for yes and left for no.</h1> 
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 300px; height: 600px; overflow: hidden;"> 
    <!-- Slides Container --> 
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 300px; height: 600px;"> 
     <div><img src="{{ STATIC_URL }}images/indian.jpg" alt="" title=""/></div> 
     <div><img src="{{ STATIC_URL }}images/hamburger.jpg" alt="" title=""/></div> 
     <div><img src="{{ STATIC_URL }}images/italian-pizza.jpg" alt="" title=""/></div> 
     <div><img src="{{ STATIC_URL }}images/hummus.jpg" alt="" title=""/></div> 
     <div><img src="{{ STATIC_URL }}images/pie.jpg" alt="" title=""/></div> 
     <div><img src="{{ STATIC_URL }}images/montecristo.jpg" alt="" title=""/></div> 
     <div><img src="{{ STATIC_URL }}images/eclairs.jpg" alt="" title=""/></div> 
    </div> 
    <script>jssor_slider1_starter('slider1_container');</script> 
</div> 
    </div> 
<script> 
    jQuery(document).ready(function ($) { 
     var options = { 
      $FillMode: 4, 
     };        
     var jssor_slider1 = new $JssorSlider$('slider1_container', options); 

     //responsive code begin 
     //you can remove responsive code if you don't want the slider scales 
     //while window resizes 
     function ScaleSlider() { 
      var parentWidth = $('#slider1_container').parent().width(); 
      if (parentWidth) { 
       jssor_slider1.$ScaleWidth(parentWidth); 
      } 
      else 
       window.setTimeout(ScaleSlider, 30); 
     } 
     //Scale slider after document ready 
     ScaleSlider(); 
     $(window).bind("load", ScaleSlider); 
     $(window).bind("resize", ScaleSlider); 
     $(window).bind("orientationchange", ScaleSlider); 
     //responsive code end 
    }); 
</script> 
</body> 
</html>

來源

2014-04-21 Michelle Glauser

只是增加了一個最大寬度和最大高度，以我的CSS，像這樣：

<style> 
#slider1_container img { 
    max-width:100%; 
    max-height:100%; 
} 
</style>

來源

2014-04-21 05:10:23

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width"> 
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.11.0.min.js"></script> 
    <script type="text/javascript" src="{{ STATIC_URL }}js/jssor.slider.mini.js"></script> 
</head> 

<body> 
    <div id="main"> 
     <h1>Swipe right for yes and left for no.</h1> 
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 300px; height: 600px; overflow: hidden;"> 
    <!-- Slides Container --> 
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 300px; height: 600px;"> 
     <div><img src="{{ STATIC_URL }}images/indian.jpg" alt="" title=""/></div> 
     <div><img src="{{ STATIC_URL }}images/hamburger.jpg" alt="" title=""/></div> 
     <div><img src="{{ STATIC_URL }}images/italian-pizza.jpg" alt="" title=""/></div> 
     <div><img src="{{ STATIC_URL }}images/hummus.jpg" alt="" title=""/></div> 
     <div><img src="{{ STATIC_URL }}images/pie.jpg" alt="" title=""/></div> 
     <div><img src="{{ STATIC_URL }}images/montecristo.jpg" alt="" title=""/></div> 
     <div><img src="{{ STATIC_URL }}images/eclairs.jpg" alt="" title=""/></div> 
    </div> 
    <script>jssor_slider1_starter('slider1_container');</script> 
</div> 
    </div> 
<script> 
    jQuery(document).ready(function ($) { 
     var options = { 
      $FillMode: 4, 
     };        
     var jssor_slider1 = new $JssorSlider$('slider1_container', options); 

     //responsive code begin 
     //you can remove responsive code if you don't want the slider scales 
     //while window resizes 
     function ScaleSlider() { 
      var parentWidth = $('#slider1_container').parent().width(); 
      if (parentWidth) { 
       jssor_slider1.$ScaleWidth(parentWidth); 
      } 
      else 
       window.setTimeout(ScaleSlider, 30); 
     } 
     //Scale slider after document ready 
     ScaleSlider(); 
     $(window).bind("load", ScaleSlider); 
     $(window).bind("resize", ScaleSlider); 
     $(window).bind("orientationchange", ScaleSlider); 
     //responsive code end 
    }); 
</script> 
</body> 
</html>

來源

2014-04-21 04:45:36 jssor

不幸的是，圖像仍然過於放大，甚至複製並粘貼該確切的代碼。 –

我能夠得到它通過添加： '' –

我想最好的方法是將$ FillMode設置爲0,1或2 – jssor

沒有爲FILLMODE的選項，這是說（包含大圖像，小圖像的實際大小）。還沒有嘗試過，但它應該工作。

參考Link

來源

2014-07-23 01:51:05

Jssor Images Too Zoomed

回答

相關問題