Question

问题是在较小的屏幕上的图像质量，即320px 375px 425px变得模糊，因为我在课堂上提到高度..我提到高度，因为我希望图像最初适合屏幕而无需用户需要向下滚动查找进一步的信息

我的问题是，我应该调整图像大小以使其具有质量。我正在分享我的代码 CSS “

.carousel{
    background-color: #2f4357;

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

” HTML “

<div class="row">
                <div class="col-md-12">
                    <div class="bs-example">
                            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                                <!-- 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>
                                </ol>   
                                <!-- Wrapper for carousel items -->
                                <div class="carousel-inner">
                                    <div class="item active">
                                        <img src="images/aa.jpg" alt="First Slide">
                                    </div>
                                    <div class="item">
                                        <img src="images/aa.jpg" alt="Second Slide">
                                    </div>
                                    <div class="item">
                                        <img src="images/aa.jpg" alt="Third Slide">
                                    </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>
              </div><!-- /.col-md-8 -->

            </div>  <!-- /.end carousel row -->

Answer 1

如果您将它们用作img源，则无需为Bootstrap轮播中的图像设置任何高度或宽度。只有在将它们用作背景图像时才需要添加高度。为此，您需要为.item类添加高度并设置相同的背景属性。

Bootstrap轮播图像高度根据sm md sx lg变化

1 个答案: