如何裁剪twitter引導旋轉木馬圖像

-1

我正在嘗試製作一個「全屏旋轉木馬」，我已經成功完成了使用twitter引導程序。如何裁剪twitter引導旋轉木馬圖像

相當簡單的程序，我有旋轉木馬工作正常。但是，雖然我希望寬度參數爲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; 
}

我可能失去了一些東西簡單，但我似乎無法找到任何切斷圖像頂部或底部百分比的內容。

來源

2015-02-09 Spratters53

如果您發佈相關代碼，人們可以更好地幫助您。 – crazymatt 2015-02-09 22:28:09

這真的可以使用[MCVE]（http://stackoverflow.com/help/mcve） – 2015-02-09 22:28:36

答案比很多解釋如何裁剪圖像的網站要簡單得多。在想要裁剪的一側使用正確的邊距調用。負邊距有效地裁剪圖像。

margin-top: -10%;

來源

2015-02-09 23:43:37 Spratters53

如何裁剪twitter引導旋轉木馬圖像

回答

相關問題