Как обрезать изображение карусели в twitter bootstrap

Question

Я пытаюсь создать «полноэкранную карусель», которую я успешно сделал, используя twitter bootstrap.

Довольно простая процедура, у меня есть карусель, работающий нормально.

Однако, хотя я хочу, чтобы параметр ширины был на 100% (поэтому ширина изображения всегда соответствует 100% от размера экрана пользователя), я хочу, чтобы верх и низ изображения были обрезаны одинаково примерно на 20%. Таким образом, 60% изображения должно быть оставлено. Я, очевидно, не хочу, чтобы изображение искажалось, сокращая его.

HTML - Карусель код (фактически такой же, как найти в загрузчике, с добавлением элементов базы данных и HREF ссылки)

echo'<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>'; 
     for ($i = 1; $i < $rows; $i++){ 
     echo'<li data-target="#carousel-example-generic" data-slide-to="'.$i.'"></li>'; 
     } 
echo'</ol> 

     <!-- Wrapper for slides -->'; 
     $row2 = mysqli_fetch_array($r2, MYSQLI_ASSOC); 
echo'<div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
     <a href="Article.php?id=' . $row2['ArticleID']. '"> 
     <img src="'.$row2["BackgroundImage"].'" alt="..."></a> 
      <div class="carousel-caption"> 
      <h3>'.$row2['ArticleTitle'].'</h3> 
      </div> 
     </div>'; 
    while ($row2 = mysqli_fetch_array($r2, MYSQLI_ASSOC)) { 
    echo'<div class="item"> 
      <a href="Article.php?id=' . $row2['ArticleID']. '"> 
      <img src="'.$row2["BackgroundImage"].'" alt="..."></a> 
       <div class="carousel-caption"> 
       <h3>'.$row2['ArticleTitle'].'</h3> 
       </div> 
     </div>'; 
    } 
echo'</div> 

Css

.carousel { 
    position: relative; 
    z-index: 100; 
} 
.carousel-inner { 
    position: relative; 
    width: 100%; 
    overflow: hidden; 
} 

Я, вероятно, отсутствует что-то простое , но я не могу найти ничего, что отсекает процент изображения сверху или снизу.

Answer 1

Ответ был намного проще, чем много сайтов, объясняющих, как обрезать изображение. Используйте правильный маржинальный вызов на стороне, которую вы хотите вырезать. Отрицательная маржа эффективно обрабатывает изображение.

margin-top: -10%;