引導程序滑塊/輪播如何在div上最大化？

Question

我有一個html代碼，希望在div內最大化輪播？ 我應該包括哪些屬性才能實現此目標？

當前結果與輪播一起具有空白部分。 我使用了引導程序樣式，以減少我的CSS樣式。

 /* for testing only */ .item img {width: 100%; height: auto} BODY { background-color: #FFF; overflow : hidden; width : 100%; margin : 0px; } .page{ display: block; width: 100%; min-height: 800px; overflow: auto; margin: 0px auto 0px auto; box-sizing: border-box; } .pageClockPanel{ background-color: #333; position: fixed; top : 0px; left : 0px; clear: none; width: 60%; height : 10%; padding: 10px; } .pageRightPanel{ background-color: #1A237E; position: fixed; top : 0px; right : 0px; clear: none; width: 40%; height : 87%; box-sizing: border-box; padding: 10px; } .pageLeftPanel{ background-color: #FFF; position: fixed; top : 10%; left : 0px; clear: none; width: 60%; height : 100%; box-sizing: border-box; padding: 0px; } .pageBottomPanel{ background-color: #333; position: fixed; bottom : 0px; right: 0px; clear: none; height: 13%; width: 100%; box-sizing: border-box; padding: 10px; } div.pageLeftPanel .test{ background-color: #FFF; height : 100%; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="page"> <div class="pageClockPanel"> </div> <div class="pageRightPanel"> </div> <div class="pageLeftPanel"> <div class="test"> <div id="myCarousel" class="carousel slide slide-custom" data-ride="carousel" > <!-- Indicators --> <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> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" style="width:100%;"> </div> <div class="item"> <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;"> </div> <div class="item"> <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New york" style="width:100%;"> </div> </div> </div> </div> </div> <div class="pageBottomPanel"> </div> </div> 

Answer 1

只需將此行添加到您的CSS .item img {width: 100%; min-height: 80vh} .item img {width: 100%; min-height: 80vh}如果您使用vh屬性，它可以幫助您

 .item img {width: 100%; min-height: 80vh} body { background-color: #FFF; overflow : hidden; width : 100%; margin : 0px; } .page{ display: block; width: 100%; min-height: 800px; overflow: auto; margin: 0px auto 0px auto; box-sizing: border-box; } .pageClockPanel{ background-color: #333; position: fixed; top : 0px; left : 0px; clear: none; width: 60%; height : 10%; padding: 10px; } .pageRightPanel{ background-color: #1A237E; position: fixed; top : 0px; right : 0px; clear: none; width: 40%; height : 87%; box-sizing: border-box; padding: 10px; } .pageLeftPanel{ background-color: #FFF; position: fixed; top : 10%; left : 0px; clear: none; width: 60%; height : 100%; box-sizing: border-box; padding: 0px; } .pageBottomPanel{ background-color: #333; position: fixed; bottom : 0px; right: 0px; clear: none; height: 13%; width: 100%; box-sizing: border-box; padding: 10px; } div.pageLeftPanel .test{ background-color: #FFF; height : 100%; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="page"> <div class="pageClockPanel"> </div> <div class="pageRightPanel"> </div> <div class="pageLeftPanel"> <div class="test"> <div id="myCarousel" class="carousel slide slide-custom" data-ride="carousel" > <!-- Indicators --> <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> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" style="width:100%; "> </div> <div class="item"> <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;"> </div> <div class="item"> <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New york" style="width:100%;"> </div> </div> </div> </div> </div> <div class="pageBottomPanel"> </div> </div>