老師請問為什么圖片沒有按比例縮放？只顯示了上面500px，下面的沒了。
比如IE的那張圖 ?下面都沒有了。 看著好奇怪。求解決辦法
qq_Pal_0
2015-11-02
4 回答
舉報
0/150
提交
取消
2016-04-20
同提問，我的也是這個問題，縮放屏幕時圖片不能填滿
2016-04-20
<!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;/*導(dǎo)航固定頂部單不會遮擋內(nèi)容*/
? ? ? }
? ? ? .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">切換導(dǎo)航</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="#">關(guān)于</a></li>
? ? ? </ul>
? ?</div>
</div>
</nav>
<div id="myCarousel" class="carousel slide">
? ?<!-- 輪播（Carousel）指標(biāo) -->
? ?<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），是一個自由及開放源代碼網(wǎng)頁瀏覽器，使用Gecko排版引擎，支持多種操作系統(tǒng)，如Windows、Mac OS X及GNU/Linux等。</p>
? ? ? ? ? ? <p>
? ? ? ? ? ? ? <a class="btn btn-lg btn-primary" 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瀏覽器，是一款快速、簡單且安全的網(wǎng)絡(luò)瀏覽器，能很好地滿足新型網(wǎng)站對瀏覽器的要求。</p>
? ? ? ? ? ? <p>
? ? ? ? ? ? ? <a class="btn btn-lg btn-primary" 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，是蘋果計算機的最新操作系統(tǒng)Mac OS X中的瀏覽器，使用了KDE的KHTML作為瀏覽器的運算核心。</p>
? ? ? ? ? ? <p>
? ? ? ? ? ? ? <a class="btn btn-lg btn-primary" 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，是美國微軟公司推出的一款網(wǎng)頁瀏覽器。原稱Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7、8、9、10、11版本)，簡稱IE。</p>
? ? ? ? ? ? <p>
? ? ? ? ? ? ? <a class="btn btn-lg btn-primary" 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公司制作的支持多頁面標(biāo)簽式瀏覽的網(wǎng)絡(luò)瀏覽器，是跨平臺瀏覽器可以在Windows、Mac和Linux三個操作系統(tǒng)平臺上運行。</p>
? ? ? ? ? ? <p>
? ? ? ? ? ? ? <a class="btn btn-lg btn-primary" 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 瀏覽器，是一款快速、簡單且安全的網(wǎng)絡(luò)瀏覽器，能很好地滿足新型網(wǎng)站對瀏覽器的要求。</p>
? ? ? ? ? ? <p>
? ? ? ? ? ? ? <a class="btn btn-lg btn-primary" target="_blank" role="button">點我下載</a>
? ? ? ? ? ? </p>
? ? ? ? ?</div>
? ? ? </div>-->
? ?</div>?
? ?<!-- 輪播（Carousel）導(dǎo)航按鈕 -->
? ?<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>
2015-12-26
貼出你寫的代碼。
2015-11-04
指定寬度100%或者是高度100%就可以了。