title: Swiper-slide height stretching image in mobile
body: <p>I have a div with a background image that looks perfectly fine on desktop. But when I switch to mobile, the image becomes stretched top to bottom creating a lot of space between content and the carousel itself which are both inside the div.</p>
  
  <p>Here is the swiper-slide code: </p>
  
  <pre><code>   .swiper-slide {
      text-align: center;
      font-size: 18px;
      height: 550px;
      /* Center slide text vertically */
      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>Note I set the height to a fixed 550px, which I know is the problem. My question is how to make the height something else while in mobile so that it could look the same as it does in desktop.</p>
  
  <p>Here is the javascript for this specific carousel that I am using:</p>
  
  <pre><code> var swiper1 = new Swiper('#swiper2', {
      slidesPerView: 4,
      slidesPerColumn: 1,
      spaceBetween: 30
  
  });
  </code></pre>
  
  <p>And here are screenshots to show you what is happening on my site.
  <a href="http://imgur.com/a/ye542" rel="nofollow">http://imgur.com/a/ye542</a></p>