圖片溢出carousel高度
carousel設(shè)置了高度為500px；但是圖片高度還是不受限制，超出了carousel的高度怎么回事兒？
甘子12
2017-03-15
4 回答
舉報
0/150
提交
取消
2018-05-18
你可以在瀏覽器看.item類容器的500px是否成功加上了，你的代碼里是?.carousel.item 兩個類名沒有空格是交集選擇器，并沒有成功選擇到?.carousel .item這個元素所以你的樣式就沒有加上去
2017-05-20
圈圈這里能看出來超出的部分；
代碼如下：
<!DOCTYPE html>
<html>
? <head>
? ? <meta charset="utf-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1">
? ? ? <title>現(xiàn)在瀏覽器博物館</title>
? ? <link href="css/bootstrap.min.css" rel="stylesheet">
? ? <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
? ? <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
? ? <!--[if lt IE 9]>
? ? ? <script src="js/html5shiv.min.js"></script>
? ? ? <script src="js/respond.min.js"></script>
? ? <![endif]-->
? ? <style type="text/css">
? ? ? body{
? ? ? ? padding-top: 50px;
? ? ? ?}
? ? ? .carousel{
? ? ? ? height: 500px;
? ? ? ? background: #000; ? ? ? ?
? ? ? }
? ? ? .carousel.item{
? ? ? ? height: 500px;
? ? ? ? background-color: #000;
? ? ? }
? ? ? .carousel-caption p{
? ? ? ? margin-bottom: 20px;
? ? ? ? font-size: 20px;
? ? ? ? line-height: 1.8;
? ? ? }
? ? ? .carousel img{
? ? ? ? width: 100%;
? ? ? ? height: 500px; ? ? ?
? ? ? }
? ? ??
? ? </style>
? </head>
? <body>
? <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
? <div>
? ? <!-- Brand and toggle get grouped for better mobile display -->
? ? <div>
? ? ? <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
? ? ? ? <span>Toggle navigation</span>
? ? ? ? <span></span>
? ? ? ? <span></span>
? ? ? ? <span></span>
? ? ? </button>
? ? ? <a href="#">現(xiàn)代瀏覽器博物館</a>
? ? </div>
? ? <!-- Collect the nav links, forms, and other content for toggling -->
? ? <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
? ? ? <ul class="nav navbar-nav">
? ? ? ? <li><a href="#">綜述</a></li>
? ? ? ? <li><a href="">簡述</a></li>
? ? ? ? ? <li>
? ? ? ? ? <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">特點 <span></span></a>
? ? ? ? ? <ul>
? ? ? ? ? ? <li><a href="#">Action</a></li>
? ? ? ? ? ? <li><a href="#">Another action</a></li>
? ? ? ? ? ? <li><a href="#">Something else here</a></li>
? ? ? ? ? ? <li role="separator"></li>
? ? ? ? ? ? <li><a href="#">Separated link</a></li>
? ? ? ? ? ? <li role="separator"></li>
? ? ? ? ? ? <li><a href="#">One more separated link</a></li>
? ? ? ? ? </ul> ? ? ? ? ?
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">關(guān)于<span></span></a>
? ? ? ? <ul>
? ? ? ? <li><a href="">關(guān)于我們</a></li>
? ? ? ? </ul>
? ? ? ? </li>
? ? ? </ul>
? ? ??
? ? ? </div><!-- /.navbar-collapse -->
? </div><!-- /.container-fluid -->
</nav>
<!-- ?輪播內(nèi)容 ?-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
? <!-- Indicators -->
? <ol>
? ? <li data-target="#carousel-example-generic" data-slide-to="0"></li>
? ? <li data-target="#carousel-example-generic" data-slide-to="1"></li>
? ? <li data-target="#carousel-example-generic" data-slide-to="2"></li>
? ? <li data-target="#carousel-example-generic" data-slide-to="3"></li>
? </ol>
? <!-- Wrapper for slides -->
? <div role="listbox">
? ? <div class="item active">
? ? ? <img src="img/1.jpg" alt="谷歌瀏覽器">
? ? ? <div>
? ? ? ? 在一個帶有層次的導(dǎo)航結(jié)構(gòu)中標(biāo)明當(dāng)前頁面的位置。各路徑間的分隔符已經(jīng)自動通過 CSS 的 :before 和 content 添加了
? ? ? </div>
? ? </div>
? ? <div>
? ? ? <img src="img/2.jpg" alt="...">
? ? ? <div>
? ? ? ? 分頁為您的網(wǎng)站或應(yīng)用提供帶有展示頁碼的分頁組件，或者可以使用簡單的翻頁組件
? ? ? </div>
? ? </div>
? ? <div>
? ? ? <img src="img/3.jpg" alt="...">
? ? ? <div>
? ? ? ? 徽章給鏈接、導(dǎo)航等元素嵌套元素，可以很醒目的展示新的或未讀的信息條目。
? ? ? </div>
? ? </div>
? ? <div>
? ? ? <img src="img/4.jpg" alt="...">
? ? ? <div>
? ? ? ? 適配導(dǎo)航元素的激活狀態(tài)Bootstrap 內(nèi)置的樣式，讓膠囊式導(dǎo)航內(nèi)處于激活狀態(tài)的元素所包含的徽章展示相匹配的樣式。
? ? ? </div>
? ? </div>
? ??
? </div>
? <!-- Controls -->
? <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
? ? <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
? ? <span>上一頁</span>
? </a>
? <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
? ? <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
? ? <span>下一頁</span>
? </a>
</div>
? ?<!-- ?輪播內(nèi)容 ?-->
? </body> ?
? ? <script src="js/jquery-3.2.1.min.js"></script>
? ? ?<script src="js/bootstrap.min.js"></script>
</html>
2017-05-20
按照“在.carousel img的樣式里設(shè)置height”也不行??；還是超出來了！~~
2017-03-24
圖片本身具有長寬比例，設(shè)置.carousel img的width:100%后，圖片的寬度被自動擴到屏幕的寬，高度也會按相同的比例拉伸，carousel設(shè)置的高度只是說放圖片的div的高度并不是圖片本身的高度，要設(shè)置圖片的高度，也要在.carousel img的樣式里設(shè)置height樣式才行