製作引導程序的半滑塊輪播圖像響應

我想從bootstrap（codepen在下面的鏈接）採用半頁背景滑塊模板，但在桌面上調整頁面大小時遇到困難，因爲背景圖像未調整大小因此。在half-slider.css中的高度和重量設置的解釋將不勝感激。製作引導程序的半滑塊輪播圖像響應

當前實現擋住了與手機和平板設備山水景觀，這是我努力調整半滑照片作爲頁面的其餘部分的原因是調整照片的頂部。

<html lang="en"> 

<head> 

<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="description" content=""> 
<meta name="author" content=""> 

<title>Half Slider - Start Bootstrap Template</title> 


</head> 

<body> 

<!-- Navigation --> 
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Start Bootstrap</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="#">About</a> 
       </li> 
       <li> 
        <a href="#">Services</a> 
       </li> 
       <li> 
        <a href="#">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 

<!-- Half Page Image Background Carousel Header --> 
<header id="myCarousel" class="carousel slide"> 
    <!-- 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"> 
      <!-- Set the first background image using inline CSS below. --> 
      <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div> 
      <div class="carousel-caption"> 
       <h2>Caption 1</h2> 
      </div> 
     </div> 
     <div class="item"> 
      <!-- Set the second background image using inline CSS below. --> 
      <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div> 
      <div class="carousel-caption"> 
       <h2>Caption 2</h2> 
      </div> 
     </div> 
     <div class="item"> 
      <!-- Set the third background image using inline CSS below. --> 
      <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div> 
      <div class="carousel-caption"> 
       <h2>Caption 3</h2> 
      </div> 
     </div> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
     <span class="icon-prev"></span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
     <span class="icon-next"></span> 
    </a> 

</header> 

<!-- Page Content --> 
<div class="container"> 

    <div class="row"> 
     <div class="col-lg-12"> 
      <h1>Half Slider by Start Bootstrap</h1> 
      <p>The background images for the slider are set directly in the HTML using inline CSS. The rest of the styles for this template are contained within the <code>half-slider.css</code>file.</p> 
     </div> 
    </div> 

    <hr> 

    <!-- Footer --> 
    <footer> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <p>Copyright &copy; Your Website 2014</p> 
      </div> 
     </div> 
     <!-- /.row --> 
    </footer> 

</div> 
<!-- /.container --> 

<!-- jQuery --> 
<script src="js/jquery.js"></script> 

<!-- Bootstrap Core JavaScript --> 
<script src="js/bootstrap.min.js"></script> 

<!-- Script to Activate the Carousel --> 
<script> 
$('.carousel').carousel({ 
    interval: 5000 //changes the speed 
}) 
</script>

和相應的CSS：

html, 
body { 
    height: 100%; 
} 

.carousel { 
    height: 50%; 
} 

.item, 
.active, 
.carousel-inner { 
    height: 100%; 
} 

.fill { 
    width: 100%; 
    height: 100%; 
    background-position: center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
} 

footer { 
    margin: 50px 0; 
}

來源

2016-11-17 K. Li

分享在flunker您的代碼或codepen給我們看烏爾試用的預覽。那麼我們可以建議更好。 – Smit

對不起，發佈了錯誤的鏈接之前 - 只需在 –

好你可能有兩個辦法解決這個問題：

1）請UR導航欄，固定一流position: relative

2）添加保證金烏爾轉盤類margin-top: 1%;

來源

2016-11-17 07:04:03 Smit

添加代碼謝謝！相對的位置有訣竅。爲了補償，我不得不改變轉盤，但在景觀移動視圖中，它現在看起來很完美。 –

製作引導程序的半滑塊輪播圖像響應

回答

相關問題