问答详情
源自:3-5 滚动图片广告

老师请问为什么图片没有按比例缩放?只显示了上面500px,下面的没了。

比如IE的那张图  下面都没有了。 看着好奇怪。求解决办法

提问者:qq_Pal_0 2015-11-02 18:42

个回答

  • 丁吉瑞斯
    2016-04-20 10:45:31

    同提问,我的也是这个问题,缩放屏幕时图片不能填满

  • 丁吉瑞斯
    2016-04-20 10:44:22

    <!DOCTYPE html>

    <html>

      <head>

        <title>浏览器博物馆</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta http-equiv="content-type" content="text/html;charset=utf-8">

        <!-- Bootstrap -->

        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

        <script src="script/jquery-1.12.3.js"></script>

        <script src="bootstrap/js/bootstrap.min.js"></script>

        <!--[if lt IE 9]>

            <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>

            <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>

        <![endif]-->

        <style>

          body {

            padding-top: 51px;/*导航固定顶部单不会遮挡内容*/

          }

          .carousel {

            height: 500px;

            background-color: #000;

          }

          .carousel .item {

            height: 500px;

            background-color: #000;

          }

          .carousel img {

            width: 100%;

          }

          .carousel-caption {

            margin-bottom: 20px;

            line-height: 1.8;

            font-family: "微软雅黑";

          }

        </style>

      </head>

      <body>



    <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">

    <div class="container">

       <div class="navbar-header">

          <button type="button" class="navbar-toggle" data-toggle="collapse" 

             data-target="#example-navbar-collapse">

             <span class="sr-only">切换导航</span>

             <span class="icon-bar"></span>

             <span class="icon-bar"></span>

             <span class="icon-bar"></span>

          </button>

          <a class="navbar-brand" href="#">浏览器博物馆</a>

       </div>

       <div class="collapse navbar-collapse" id="example-navbar-collapse">

          <ul class="nav navbar-nav">

             <li class="active"><a href="#">综述</a></li>

             <li><a href="#">简述</a></li>

             <li class="dropdown">

                <a href="#" class="dropdown-toggle" data-toggle="dropdown">特点</a>

                <ul class="dropdown-menu" role="menu">

                  <li><a href="#">Chrome</a></li>

                  <li><a href="#">Firefox</a></li>

                  <li><a href="#">Opera</a></li>

                  <li><a href="#">IE</a></li>

                  <li><a href="#">Safari</a></li>

                </ul>

             </li>

             <li><a href="#">关于</a></li>

          </ul>

       </div>

    </div>

    </nav>


    <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>


  • pardon110
    2015-12-26 15:45:21

    贴出你写的代码。

  • pardon110
    2015-11-04 10:55:31

    指定宽度100%或者是高度100%就可以了。