css - 高度和控件的 Bootstrap 轮播问题

Question

我的 bootstrap 轮播面临一个问题，因为它的运行时间与图像的长度一样长，而且轮播控制着它从轮播中出现的地方，它看起来很丑。我做了一个屏幕记录，这样可以更容易地准确了解问题的具体情况。

如果你能看到它，我希望它能解释更多我正在寻找的东西 https://www.youtube.com/watch?v=_9C8elqAscg

.carousel{margin-top: 20px;}.carousel .item img{margin: 0 auto; /* Align slide image horizontally center */}.bs-example{margin: 20px;}

<div class="bs-example">
  <div id="myCarousel" class="carousel slide" data-ride="carousel" role="listbox">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        <li data-target="#myCarousel" data-slide-to="4"></li>
    </ol>   
    <!-- Wrapper for carousel items -->
    <div class="carousel-inner" class="myrdbtns">
        <div class="item active">
            <asp:Image ID="image" runat="server" alt="First Slide" ImageUrl='<%# "/images/AdsImgs/" + Eval("Img1") %>'></asp:Image>
        </div>
        <div class="item">
            <asp:Image ID="imgslide2" runat="server" alt="Second Slide" ImageUrl='<%# "/images/AdsImgs/" + Eval("Img2") %>'></asp:Image>
        </div>
        <div class="item">
            <asp:Image ID="imgslide3" runat="server" alt="Third Slide" ImageUrl='<%# "/images/AdsImgs/" + Eval("Img3") %>'></asp:Image>
        </div>
        <div class="item">
            <asp:Image ID="imgslide4" runat="server" alt="fourth Slide" ImageUrl='<%# "/images/AdsImgs/" + Eval("Img4") %>'></asp:Image>
        </div>
        <div class="item">
            <asp:Image ID="imgslide5" runat="server" alt="fifth Slide" ImageUrl='<%# "/images/AdsImgs/" + Eval("Img5") %>'></asp:Image>
        </div>
    </div>
    <!-- Carousel controls -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev" >
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
</div>

Answer 1

因此，您可以通过多种不同的方式使图片适合轮播。首先，您可以将轮播元素设置为具有指定的高度。然后将图像的高度和宽度设置为 100%。这样做的一个问题是图像可能会倾斜，从您的视频中我看到其中一张图像比其他图像高得多，因此如果您走这条路，这张图像可能看起来有点傻。以下是如何设置图像高度的示例。

#myCarousel .item{
  height: 300px;
}
#myCarousel .item img{
  height: 100%;
  width: 100%;
}

或者您可以为每个元素设置一个背景图像，然后将背景图像设置为覆盖。这可能会切断一些非常高的图像，但至少图像会显得非像素化。这是一个例子。

#myCarousel .item{
  height: 300px;
  background-position: center !Important;
  background-size: cover !Important;
}

然后对于每个元素，您的 html 将如下所示:

<div class="item" style="background: url('http://placehold.it/1080x720');">
     //your item content here
</div>

至于轮播控件，它们绝对定位在轮播中，因此您可以通过设置每个控件的左、右、顶部和底部来控制它们，如下所示:

.carousel-control{
  top: 40px;
  bottom: 20px;
}
.carousel-control.left{
  left: 20px;
}
.carousel-control.right{
  right: 20px;
}

我已经设置了一个我认为您正在寻找的东西的演示 JSFiddle Bootstrap Carousel

在此演示中，我将 .item 设置为具有百分比的填充底部。这将使轮播响应，但您也可以将 .item 设置为具有高度。然后我给了 <p>每个元素中的标记具有指定的高度和行高，并将轮播控件设置为显示在其下方。如果您觉得文本太长有问题，您可以设置 <p>标签具有更高的高度或使用文本溢出:省略号或类似性质的东西。无论如何，它可能不是您正在寻找的东西，但它至少会让您朝着正确的方向开始。

希望对您有所帮助。