Bootstrap Carousel图像高度根据SM MD SX LG变化

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类并设置相同的背景属性。