如何裁剪 twitter 引导轮播图像

Posted 2023-02-25

【中文标题】如何裁剪 twitter 引导轮播图像

【英文标题】：How to crop a twitter bootstrap carousel image

【发布时间】：2015-02-09 22:14:57

【问题描述】：

我正在尝试制作一个“全屏轮播”，我已经使用 twitter 引导程序成功完成了该操作。 http://getbootstrap.com/javascript/#carousel

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

但是，虽然我希望宽度参数为 100%（因此图像的宽度始终适合用户屏幕尺寸的 100%），但我希望图像的顶部和底部被平均裁剪每个约 20%。所以应该留下 60% 的图像。我显然不希望图像因缩小而变形。

html - 轮播代码（实际上与 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"].'" ></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"].'" ></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;

我可能遗漏了一些简单的东西，但我似乎找不到任何东西可以从顶部或底部截断图像的一部分。

【问题讨论】：

如果您发布相关代码，人们可以更好地帮助您。

这真的可以使用MCVE

【参考方案1】：

答案比许多解释如何裁剪图像的网站要简单得多。在您希望裁剪的一侧使用正确的追加保证金。负边距有效地裁剪图像。

margin-top: -10%;