Question

我正面临着我的自举旋转木马的问题，因为它的图像很长很长，旋转木马控制旋转木马的出现，看起来很难看。我制作了一个屏幕记录，可以更容易地理解问题的确切结果。

我希望你能看到它能解释更多我正在寻找的东西 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>标记设置为更高的高度或使用文本溢出：elipsis或类似的东西。无论如何，它可能不是你想要的，但它至少会让你开始朝着正确的方向前进。

希望它有所帮助。

带有高度和控件的bootstrap轮播问题

1 个答案: