bootstrap轮播图缩小屏幕后图片缩小了高度不能填充

Question

    <style>
      body {
        padding-top: 51px;/*导航固定顶部单不会遮挡内容*/
      }
      .carousel {
        height: 450px;
        background-color: #000;
      }
      .carousel .item {
        height: 450px;
        background-color: #000;
      }
      .carousel img {
        width: 100%;
      }
      .carousel-caption {
        margin-bottom: 20px;
        line-height: 1.8;
        font-family: "微软雅黑";
      }
    </style>

<div id="myCarousel" class="carousel slide">
   <!-- 轮播（Carousel）指标 -->
   <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li><!-- data-slide-to是索引，从0开始 -->
      <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>   
   <!-- 轮播（Carousel）项目 -->
   <div class="carousel-inner">
    <div class="item active">
         <img src="image/firefox0.jpg" alt="Firefox">
         <div class="carousel-caption">
            <h1>Firefox</h1>
            <p>Mozilla Firefox，中文俗称“火狐”（正式缩写为Fx或fx，非正式缩写为FF），是一个自由及开放源代码网页浏览器，使用Gecko排版引擎，支持多种操作系统，如Windows、Mac OS X及GNU/Linux等。</p>
            <p>
              <a class="btn btn-lg btn-primary" href="http://windows.microsoft.com/zh-cn/internet-explorer/download-ie" target="_blank" role="button">点我下载</a>
            </p>
         </div>
      </div>
      <div class="item">
         <img src="image/chrome0.jpg" alt="chrome">
         <div class="carousel-caption">
            <h1>Chrome</h1>
            <p>Chrome浏览器，是一款快速、简单且安全的网络浏览器，能很好地满足新型网站对浏览器的要求。</p>
            <p>
              <a class="btn btn-lg btn-primary" href="http://www.google.cn/chrome/browser/desktop/index.html" target="_blank" role="button">点我下载</a>
            </p>
         </div>
      </div>
      <div class="item">
         <img src="image/safari0.jpg" alt="safari">
         <div class="carousel-caption">
            <h1>Safari</h1>
            <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。</p>
            <p>
              <a class="btn btn-lg btn-primary" href="http://rj.baidu.com/soft/detail/12966.html?ald" target="_blank" role="button">点我下载</a>
            </p>
         </div>
      </div>
      <div class="item">
         <img src="image/ie0.jpg" alt="ie">
         <div class="carousel-caption">
            <h1>IE</h1>
            <p>Internet Explorer，是美国微软公司推出的一款网页浏览器。原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7、8、9、10、11版本)，简称IE。</p>
            <p>
              <a class="btn btn-lg btn-primary" href="http://windows.microsoft.com/zh-cn/internet-explorer/download-ie" target="_blank" role="button">点我下载</a>
            </p>
         </div>
      </div>
      <div class="item">
         <img src="image/opera0.jpg" alt="opera">
         <div class="carousel-caption">
            <h1>Opera</h1>
            <p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器，是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。</p>
            <p>
              <a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" target="_blank" role="button">点我下载</a>
            </p>
         </div>
      </div>
     <!--  <div class="item">
         <img src="image/google.jpg" alt="chrome">
         <div class="carousel-captain text-center">
            <h1>Chrome</h1>
            <p>Chrome 浏览器，是一款快速、简单且安全的网络浏览器，能很好地满足新型网站对浏览器的要求。</p>
            <p>
              <a class="btn btn-lg btn-primary" href="http://www.google.cn/chrome/browser/desktop/index.html" target="_blank" role="button">点我下载</a>
            </p>
         </div>
      </div>-->
   </div> 
   <!-- 轮播（Carousel）导航按钮 -->
   <a class="carousel-control left" href="#myCarousel" data-slide="prev" role="button">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">上一页</span>
   </a>
   <a class="carousel-control right" href="#myCarousel" data-slide="next" role="button">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">下一页</span>
   </a>
</div>
    下面是导航栏的代码
  </body>
</html>