title: How to crop a twitter bootstrap carousel image
body: <p>I'm trying to make a "fullscreen carousel" which i have successfully done using twitter bootstrap. <a href="http://getbootstrap.com/javascript/#carousel" rel="nofollow">http://getbootstrap.com/javascript/#carousel</a></p>
  
  <p>Fairly straightforward procedure, i've got the carousel working fine. </p>
  
  <p>However, while I want the width parameter to be 100% (So the width of the image always fits 100% of whatever the user's screen size is), i want the top and bottom of the image to be cropped off equally by about 20% each. So 60% of the image should be left. I obviously don't want the image to be warped by shrinking it. </p>
  
  <p>HTML - The Carousel code (effectively the same as found in bootstrap, with the addition of database elements and href links)</p>
  
  <pre><code>echo'&lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&gt;
        &lt;!-- Indicators --&gt;
        &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;';
          for ($i = 1; $i &lt; $rows; $i++){
          echo'&lt;li data-target="#carousel-example-generic" data-slide-to="'.$i.'"&gt;&lt;/li&gt;';
          }
  echo'&lt;/ol&gt;
  
        &lt;!-- Wrapper for slides --&gt;';
        $row2 = mysqli_fetch_array($r2, MYSQLI_ASSOC);
  echo'&lt;div class="carousel-inner" role="listbox"&gt;
          &lt;div class="item active"&gt;
          &lt;a href="Article.php?id=' . $row2['ArticleID']. '"&gt;
           &lt;img src="'.$row2["BackgroundImage"].'" alt="..."&gt;&lt;/a&gt;
            &lt;div class="carousel-caption"&gt;
            &lt;h3&gt;'.$row2['ArticleTitle'].'&lt;/h3&gt;
            &lt;/div&gt;
          &lt;/div&gt;';
      while ($row2 = mysqli_fetch_array($r2, MYSQLI_ASSOC)) {
      echo'&lt;div class="item"&gt;
            &lt;a href="Article.php?id=' . $row2['ArticleID']. '"&gt;
             &lt;img src="'.$row2["BackgroundImage"].'" alt="..."&gt;&lt;/a&gt;
                  &lt;div class="carousel-caption"&gt;
                  &lt;h3&gt;'.$row2['ArticleTitle'].'&lt;/h3&gt;
                  &lt;/div&gt;
          &lt;/div&gt;';
      }
  echo'&lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.carousel {
    position: relative;
    z-index: 100;
  }
  .carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  </code></pre>
  
  <p>I'm probably missing something simple, but I can't seem to find anything that cuts off a percentage of the image from the top or bottom. </p>