title: Swiper fluid image scaling
body: <p>Using <a href="http://www.idangero.us/swiper/" rel="nofollow">Swiper</a>, I have a very standard setup:</p>
  
  <pre><code>&lt;div class="swiper-container"&gt;
  
      &lt;div class="swiper-wrapper"&gt;
          &lt;div class="swiper-slide"&gt;&lt;img src="image/whatever.jpg"&gt;&lt;/div&gt;
          &lt;div class="swiper-slide"&gt;&lt;img src="image/whatever.jpg"&gt;&lt;/div&gt;
          &lt;div class="swiper-slide"&gt;&lt;img src="image/whatever.jpg"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
      &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
      &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
      &lt;div class="swiper-scrollbar"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Same with CSS:</p>
  
  <pre><code>.swiper-container {
      width: 95%;
      height: auto;
  
  }
  
  .swiper-slide {
          text-align: center;
          font-size: 18px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
      }
  </code></pre>
  
  <p>What I'd wish, though, is that I could decrease the size of the window and have the container automatically adjust its size. As it is, only the <code>width</code> is actually adjusted, the <code>height</code> stays the same, no matter if I use <code>auto</code> or a percent value.</p>
  
  <p>The result is that my images get squashed, when I'd like them to retain their proportions.</p>
  
  <p>How can I achieve this? (CSS or JS solutions are both perfectly fine).</p>