BootStrap中轮播图的图片自适应问题

2019.5.30更新一点：最近在用Django写一个网站，因为是链接引入Bootstrap，然后用的是Bootstrap4.0.0版本的，导致jquery老版本和新Bootstrap无法兼容，轮播图直接出不来效果。之后在参考官方文档才解决的，代码参考官方文档http://code.z01.com/v4/components/carousel.html
轮播图代码如下：

    <div class="container-fluid text-left" data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height: 820px; position: relative;">
      <h2 id="shouye">首页</h2>
          <!--轮播区域-->
          <div id="myCarousel" class="carousel slide" >
            <!--轮播指标-->
            <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>
            </ol>
            <!--轮播指标-->
            <!--轮播项目-->
            <div class="carousel-inner" style="height: 750px;">
              <div class="item active" >
                <img src="img/00.jpg" alt="First slide" >
                <div class="carousel-caption">书店</div>
              </div>
              <div class="item">
                <img src="img/1.jpg" alt="First slide" >
                <div class="carousel-caption">书店</div>
              </div>
              <div class="item">
                <img src="img/2.jpg" alt="First slide"  >
                <div class="carousel-caption">书店</div>
              </div>
              <div class="item">
                <img src="img/3.jpg" alt="First slide" >
                <div class="carousel-caption">书店</div>
              </div>
            </div>
            <!--轮播控制器-->
            <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>

需要做的是在head的style中写入一个样式：

<style type="text/css">
   #myCarousel  .carousel-inner > .item > img {
   display: block;
   width:100%;
   height:div的高度，我这里是设置的750px;
}
</style>

效果如下：

BootStrap中轮播图的图片自适应问题_ide