使幻灯片适合屏幕

Question

我正在使用引导程序开发一个前端网站。我插入了幻灯片，但它不适合屏幕。我已将图像插入 HTML，而不是 CSS。这是我的代码：

    <div class="container-fluid" id="background">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="slideShow">
                <div id="myCarousel" class="carousel slide" data-ride="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 slides -->
                    <div class="carousel-inner" role="listbox">
                      <div class="item active">
                          <img src="pics/happiness1.jpg" alt="Happiness" class="slideShow">
                      </div>

                      <div class="item">
                          <img src="pics/happiness2.jpg" alt="Happiness" class="slideShow">
                      </div>

                      <div class="item">
                          <img src="pics/happiness3.jpg" alt="Happiness" class="slideShow">
                      </div>

                      <div class="item">
                          <img src="pics/happiness4.jpg" alt="Happiness" class="slideShow">
                      </div>

                      <div class="item">
                          <img src="pics/happiness5.jpg" alt="Happiness" class="slideShow">
                      </div>  
                    </div>

                    <!-- Left and right controls -->
                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                      <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                      <span class="sr-only">Next</span>
                    </a>
              </div>

        </div>
        </div>
    </div>

如何使这些图像适合屏幕？

Answer 1

添加你的 css 文件的最后一个 ..

.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img{
   min-height: 100vh;
}