title: Image responsiveness
body: <p>I am using a content slider to display content on mostly mobile devices, and the majority of my content are images.</p>
  
  <p>The slides of the content slider are placed inside a wrapper (<code>.swiper-wrapper</code>), which is set to take 100% of the screen size.</p>
  
  <p>The issue I am having is that the images are not resizing correctly according to screen size and the images are cut off when I go to landscape mode. In other words, my images are not being responsive.</p>
  
  <p>I tried <code>width:100%</code> and <code>height:auto</code> and it still doesn't work.</p>
  
  <h2>CSS</h2>
  
  <pre class="lang-css prettyprint-override"><code>.swiper-container {
  
      display: block; !important;
      margin: 0 auto; !important;
      width: 100%; !important;
  
      background-color: #222;
      color: white;
  
  }
  .swiper-slide {
  
      max-width:100%;
      height:auto;
      position: relative;
      display:block;
      margin:0 auto;
      padding-right: 15px;
      padding-left: 15px;
  
  }
  
  .swiper-slide img{
  
      width:100% !important;
      height:100% !important;
      display:block;
  }
  </code></pre>
  
  <h2>HTML</h2>
  
  <p></p>
  
  <pre><code>&lt;div class="swiper-container"&gt;
  &lt;!-- Build the content slides dynamically|databound --&gt;
      &lt;div id="slides" class="swiper-wrapper"&gt;
          &lt;div class="swiper-slide"&gt;
              &lt;img src='img/gallery-9.jpg' alt='YOLO'  /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="swiper-slide "&gt;
          &lt;div&gt;Image 2&lt;/div&gt;
              &lt;img src='img/gallery-4.jpg' alt='YOLO'/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript" src="js/idangerous.swiper-2.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      var mySwiper = new Swiper('.swiper-container',{
      speed : 400,
      freeMode : true,
      freeModeFluid : true,
      centeredSlides : true,
      resizeReInit : true,
      resistance : '100%',
      pagination: '.pagination',
      paginationClickable: true
  
      });
  
      $(window).resize(function(){
          var height = $(window).height();
          var width  = $(window).width();
          $('.swiper-container, .swiper-slide').height(height);
          $('.swiper-container, .swiper-slide').width(width);
          //Add reInit, because jQuery's resize event handler may occur earlier than Swiper's one
          mySwiper.reInit()
      })
      $(window).resize();
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p></p>