title: Bootstrap responsive CSS image width skewed and distorted
body: <p>I am using Bootstrap to create a website that uses the carousel component which takes up a large portion of the page. I am finding that when I resize the browser window and drag the viewport horizontally that the image width becomes skewed and distorted. I have set the following overall CSS styles for my carousel along with media queries for different widths.</p>
  
  <p>Are there any amendments to my CSS rules or properties I can apply to <code>.carousel .item</code> and <code>.carousel img</code> to prevent the width of the image being distorted when the browser window is dragged horizontally? I was thinking <code>width:100%;</code> my possibly resolve this issue?</p>
  
  <p>Here is an image of the skewing occuring when resizing the browser horizontally:
  <img src="https://i.stack.imgur.com/DslGu.jpg" alt="enter image description here"></p>
  
  <p>Here is the website: <a href="http://www.the-session.co.uk/jen/" rel="nofollow noreferrer">http://www.the-session.co.uk/jen/</a></p>
  
  <p>Here is the CSS:</p>
  
  <pre><code>.carousel .item {
    height: 900px;
  }
  .carousel img {
    min-width: 100%;
    height: 900px;
  }
  
  @media (max-width: 979px) {
  
    .carousel .item {
      height: 500px;
    }
    .carousel img {
      width: auto;
      height: 500px;
    }
  }
  
  
  @media (max-width: 767px) {
  
    .carousel .item {
      height: 300px;
    }
    .carousel img {
      height: 300px;
    } 
  }
  </code></pre>