title: Disable auto resize of Bootstrap carousel images
body: <p>How can I disable resizing of the <code>carousel</code> when browser is resized or at least establish a minimum width? </p>
  
  <p>For example <a href="http://www.jqueryscript.net/demo/Full-Width-Responsive-Carousel-with-jQuery-Bootstrap/" rel="nofollow noreferrer">here</a> If I resize the window to <code>200x600 px</code> the carousel images are barely visible and they generate an empty space underneath the carousel. </p>
  
  <p>What I would like to have instead is something similar to <a href="http://www.hostelworld.com" rel="nofollow noreferrer">hostel world website</a> where even if I resize the window, the carousel images are not "squeezed".</p>
  
  <p>I tried to give <code>.carousel</code> and <code>.item</code> <code>min-width, width</code> etc but it doesn't respect anything. </p>
  
  <pre><code>.item {
       //height: 100%;
      //width: 100%;
      //height: 640px;
      //width: 640px;
      //height: 100vh;
      min-width: 500px;
      overflow: hidden;
  
  }
  
  .carousel {
      //min-height: 640px;
      min-width: 500px;
      overflow: hidden;
      //width: 100%;
      //height: 100%;
      //height: 640px;
      //width: 640px;
  }
  </code></pre>