title: Jssor Images Too Zoomed In
body: <p>I'm using <a href="http://jssor.com" rel="nofollow noreferrer">the Jssor library</a> to create an image slider. I set $FillMode to 4 so that the images should fit in the container, but it didn't work. This is what one of the images looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/MRVIg.png" alt="enter image description here"> </p>
  
  <p>So I tried every other mode and didn't see any changes. </p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
      &lt;head&gt;
      &lt;script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="{{ STATIC_URL }}js/jssor.core.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="{{ STATIC_URL }}js/jssor.utils.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="{{ STATIC_URL }}js/jssor.slider.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="{{ STATIC_URL }}js/jssor.slider.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="{{ STATIC_URL }}js/jssor.slider.mini.js"&gt;&lt;/script&gt;
  &lt;/head&gt; 
  
  &lt;body&gt; 
      &lt;div id="main"&gt;
         &lt;h1&gt;Swipe right for yes and left for no.&lt;/h1&gt;
  &lt;div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 300px; height: 600px; overflow: hidden;"&gt;
      &lt;!-- Slides Container --&gt;
      &lt;div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 300px; height: 600px;"&gt;
          &lt;div&gt;&lt;img src="{{ STATIC_URL }}images/indian.jpg" alt="" title=""/&gt;&lt;/div&gt; 
          &lt;div&gt;&lt;img src="{{ STATIC_URL }}images/hamburger.jpg" alt="" title=""/&gt;&lt;/div&gt; 
          &lt;div&gt;&lt;img src="{{ STATIC_URL }}images/italian-pizza.jpg" alt="" title=""/&gt;&lt;/div&gt; 
          &lt;div&gt;&lt;img src="{{ STATIC_URL }}images/hummus.jpg" alt="" title=""/&gt;&lt;/div&gt; 
          &lt;div&gt;&lt;img src="{{ STATIC_URL }}images/pie.jpg" alt="" title=""/&gt;&lt;/div&gt; 
          &lt;div&gt;&lt;img src="{{ STATIC_URL }}images/montecristo.jpg" alt="" title=""/&gt;&lt;/div&gt; 
          &lt;div&gt;&lt;img src="{{ STATIC_URL }}images/eclairs.jpg" alt="" title=""/&gt;&lt;/div&gt; 
      &lt;/div&gt; 
      &lt;script&gt;jssor_slider1_starter('slider1_container');&lt;/script&gt;
  &lt;/div&gt;
      &lt;/div&gt; 
  &lt;script&gt;
      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
      });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>