如何裁剪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引导旋转木马图像

回答

相关问题