title: Bootstrap carousel width 100% and responsive
body: <p>I have a carousel on my page, but when i make the images width 100% they don't seem to sit properly within the banner, they seem stretched. My images are 2000px by 550px and i want them to fill the banner and respond down keeping this ratio. </p>
  
  <p>At the moment they are 100% but they seem stretched and too tall at 750px</p>
  
  <p>I believe this is a css issue? although i'm not sure what part of the bootstrap code i'd need to change. There seems to be something that is forcing the image to resize like this.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function($) {
      $.fn.InitBanner = function(opts) {
          var config = $.extend({}, {
              'data' : []
          }, opts);
  
          function Init(obj) {
              if( config.data.length &gt; 0 ) {
                  AddItems(obj);   
              } else {
                  console.error("Please specify the data json");   
              }
          }
  
          function AddItems(obj) {
  
              var htmlstring = '';
              var json = config.data;
  
              for( var i = 0; i &lt; json.length; i++ ) {
  
                  if( i === 0 ) htmlstring += '&lt;div class="item active"&gt;';
                  else htmlstring += '&lt;div class="item"&gt;';
  
                  htmlstring += '&lt;a href="' + json[i].url + '"&gt;&lt;img src="' + json[i].imageUrl + '"&gt;&lt;/a&gt;';
  
                  if( json[i].tags !== null ) {
                      for( var j = 0; j &lt; json[i].tags.length; j++ ) {
                          if( json[i].tags[j].toLowerCase() === 'caption' ) {
                              htmlstring += '&lt;div class="carousel-caption hidden-sm hidden-xs"&gt;';
                              htmlstring += '&lt;h3&gt;' + json[i].title + '&lt;/h3&gt;';
                              htmlstring += '&lt;p&gt;' + json[i].leader + '&lt;/p&gt;';
                              htmlstring += '&lt;/div&gt;';
  
                              break;
                          }
                      }
                  }
  
                  htmlstring += '&lt;/div&gt;';
              }
  
              obj.find('.carousel-inner').html(htmlstring);
          }
  
          // initialize every element
          this.each(function() {
              Init($(this));
          });
  
          return this;
      };
  })(jQuery);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.row {
      margin-left: -15px;
      margin-right: -15px;
  }
  .carousel {
      position: relative;
  }
  .carousel-inner {
      position: relative;
      overflow: hidden;
      width: 100%;
  }
  .carousel-inner&gt;.item&gt;img, .carousel-inner&gt;.item&gt;a&gt;img {
      width: 100%;
  }
  .carousel-inner&gt;.item&gt;img, .carousel-inner&gt;.item&gt;a&gt;img {
      line-height: 1;
  }
  .img-responsive, .thumbnail&gt;img, .thumbnail a&gt;img, .carousel-inner&gt;.item&gt;img, .carousel-inner&gt;.item&gt;a&gt;img {
      display: block;
      max-width: 100%;
      height: auto;
  }
  img {
      vertical-align: middle;
  }
  img {
      border: 0;
  }
  
  @media not all, (-webkit-transform-3d)
  .carousel-inner&gt;.item {
      transition: transform .6s ease-in-out;
      backface-visibility: hidden;
      perspective: 1000;
  }
  
  .carousel-inner&gt;.item {
      display: none;
      position: relative;
      -webkit-transition: .6s ease-in-out left;
      -o-transition: .6s ease-in-out left;
      transition: .6s ease-in-out left;
      -webkit-transition: 0.6s ease-in-out left;
      -moz-transition: 0.6s ease-in-out left;
      -o-transition: 0.6s ease-in-out left;
      transition: 0.6s ease-in-out left;
  }
  @media not all, (-webkit-transform-3d)
  .carousel-inner&gt;.item.next.left, .carousel-inner&gt;.item.prev.right, .carousel-inner&gt;.item.active {
      transform: translate3d(0, 0, 0);
      /* left: 0; */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="row"&gt;
      &lt;div class="carousel slide" id="bannerFrontPage"&gt;
          
          &lt;div class="carousel-inner"&gt;
            &lt;div class="item"&gt;&lt;a href="https://www.gkunions.co.uk/freshers/"&gt;&lt;img src="/asset/News/7328/Freshers-GKU-Webbanner.png?thumbnail_width=1650&amp;amp;thumbnail_height=650&amp;amp;resize_type=CropToFit"&gt;&lt;/a&gt;&lt;/div&gt;
            &lt;div class="item active"&gt;&lt;a href="http://www.gkunions.co.uk/studenthub/"&gt;&lt;img src="/asset/News/7328/hub.png?thumbnail_width=1650&amp;amp;thumbnail_height=650&amp;amp;resize_type=CropToFit"&gt;&lt;/a&gt;&lt;/div&gt;
            &lt;div class="item"&gt;&lt;a href="news/article/7328/Employability-Fair/"&gt;&lt;img src="/asset/News/7328/Employability-fair-banner_GKU-Website.jpg?thumbnail_width=1650&amp;amp;thumbnail_height=650&amp;amp;resize_type=CropToFit"&gt;&lt;/a&gt;&lt;/div&gt;
            &lt;div class="item"&gt;&lt;a href="news/article/7328/Team-Medway/"&gt;&lt;img src="/asset/News/7328/gku-banner-4.jpg?thumbnail_width=1650&amp;amp;thumbnail_height=650&amp;amp;resize_type=CropToFit"&gt;&lt;/a&gt;&lt;/div&gt;
            &lt;div class="item"&gt;&lt;a href="http://www.gkunions.co.uk/clickandcollect/"&gt;&lt;img src="/asset/News/7328/cc2000.png?thumbnail_width=1650&amp;amp;thumbnail_height=650&amp;amp;resize_type=CropToFit"&gt;&lt;/a&gt;&lt;/div&gt;
            &lt;div class="item"&gt;&lt;a href="http://www.gkunions.co.uk/pageassets/whoarewe/impactreport2015/2015_GKU_impact-report_Spread_web.pdf"&gt;&lt;img src="/asset/News/7328/Impact-web-banner_gku.png?thumbnail_width=1650&amp;amp;thumbnail_height=650&amp;amp;resize_type=CropToFit"&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
          
          &lt;a class="left carousel-control" data-slide="prev" href="#bannerFrontPage"&gt;&lt;span class="sr-only"&gt;Previous&lt;/span&gt; &lt;/a&gt; &lt;a class="right carousel-control" data-slide="next" href="#bannerFrontPage"&gt; &lt;span class="sr-only"&gt;Next&lt;/span&gt; &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>