ブートストラップカルーセルをフルハイトに調整する

カルーセルの高さをフルに設定するにはどうすればいいですか？ユーザーがページを開いたときに画面を占有し、モバイルの動作が同じである場合。ブートストラップカルーセルをフルハイトに調整する

サイトにアクセスするときは、カルーセルが表示領域全体を占有する必要があります.Scroolをスクロールすることなく、「Our Services」というテキストを視覚化することはできません。あなたはid="myCarousel"〜100％で、外側のdivの高さを設定する必要が

<div id="myCarousel" class="carousel slide" 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> 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 

     <div class="item active"> 
     <img src="img\portfolio\concretobombeado.jpg" alt="Chania" width="460" height="345"> 
     <div class="carousel-caption"> 
      <h3>Chania</h3> 
      <p>The atmosphere in Chania has a touch of Florence and Venice.</p> 
     </div> 
     </div> 

     <div class="item"> 
     <img src="img\portfolio\limpeza.jpg" alt="Chania" width="460" height="345"> 
     <div class="carousel-caption"> 
      <h3>Chania</h3> 
      <p>The atmosphere in Chania has a touch of Florence and Venice.</p> 
     </div> 
     </div> 

     <div class="item"> 
     <img src="img\portfolio\limpeza.jpg"alt="Flower" width="460" height="345"> 
     <div class="carousel-caption"> 
      <h3>Flowers</h3> 
      <p>Beatiful flowers in Kolymbari, Crete.</p> 
     </div> 
     </div> 

     <div class="item"> 
     <img src="img\portfolio\limpeza.jpg" alt="Flower" width="460" height="345"> 
     <div class="carousel-caption"> 
      <h3>Flowers</h3> 
      <p>Beatiful flowers in Kolymbari, Crete.</p> 
     </div> 
     </div> 

    </div> 

    <!-- Left and right controls --> 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
    </div>

出典

2017-03-27 Paulo Roberto

これをあなたのCSSファイルに追加できます。

#myCarousel{ 
height:100vh; 
width:100%; 
}

100vhは、カラウサールの高さをデバイスの画面の高さの100％に設定します。

これは、画面全体を占めるカロリーの高さと幅を設定します。

この後、.carousel-innerクラスの高さを100％に変更する必要があるかもしれません。画像の幅を調整することができます。

出典

2017-03-27 17:34:21 lhavCoder

。 cssファイルまたはhtmlファイルに追加してください。完全な高さを使用するには、<html>と<body>の高さを100％に設定する必要があります（多くの場合、CSSファイルの最初の2つのクラス）。

出典

2017-03-27 17:09:16 pudi

カルーセル画像とそのコンテナの高さを100％にする必要があります。他の答えのよう

html,body{height:100%;} 
.carousel,.item,.active{height:100%;} 
.carousel-inner{height:100%;} 
.carousel-inner>.item>img { 
    height:100%; 
}

Demo

出典

2017-03-27 17:16:13 ZimSystem

このCSSを適用した後のイメージは、部分的に機能していました。http://imgur.com/a/FNy5B –

CSSには、それを引き起こす原因があります。関連するコードをすべて指定してください。 – ZimSystem

、あなたは100％に#myCarouselの高さを設定する必要があります。もう1つのことは、テキストなどの要素にピクセルの代わりにvhを使用することです。

あなたのイメージに基づいて、私はあなたがポルトガル語を話すと判断します。だから、あなたのためのCSSユニットについてのヘルプがあります。 Unidades de CSS Moderno

そして、ここにはexplains the sameを英語で書いているW3Cガイドがあります。

PS：私はpudiの答えのコメントにこれを補足しますが、私は本当にそのようにするには十分な評判を持っていません。

出典

2017-03-27 17:21:15

ブートストラップカルーセルをフルハイトに調整する

答えて

関連する問題