Question

我试图制作一个全屏旋转木马＆＃34;我使用twitter bootstrap成功完成了。 http://getbootstrap.com/javascript/#carousel

相当简单的程序，我已经让旋转木马工作正常。

然而，虽然我希望width参数为100％（因此图像的宽度总是适合用户屏幕尺寸的100％），我希望图像的顶部和底部是同样减少约20％。因此应保留60％的图像。我显然不希望通过缩小图像来扭曲图像。

HTML - Carousel代码（实际上与bootstrap中的相同，添加了数据库元素和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%;

如何裁剪twitter bootstrap轮播图像

1 个答案: