ブートストラップカルーセルを縮小するメディアクエリ

Question

私はブートストラップバージョン4.0.0-betaを使用しており、カルーセル機能を使用しています。私はそれを自分のモニター上で見るときに、どのように必要なのかを完全に設定しました。 （1920 x 1200）ですが、ユーザーのモニターに応じて高さを変更したいと考えています（1920 x 1080など）。私はキャロルセルに32remの高さを与えましたが、ユーザーが私のように小さい画面にいる場合は、前記。私はメディアクエリが私が必要とするものだと信じていますが、私は試してみることができません。誰でもこの光を照らすことができますか？

ありがとうございました。

Answer 1

以下のサンプルを試してみてください。自分自身でそれを解決するために管理

.img-responsive, 
.thumbnail>img, 
.thumbnail a>img, 
.carousel-inner>.item>img, 
.carousel-inner>.item>a>img { 
    display: block; 
    width: 100%; 
    height: auto; 
} 

.carousel-inner { 
    border-radius: 15px; 
} 

.carousel-caption { 
    background-color: rgba(0, 0, 0, .5); 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 10; 
    padding: 0 0 10px 25px; 
    color: #fff; 
    text-align: left; 
} 

.carousel-indicators { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    width: 100%; 
    z-index: 15; 
    margin: 0; 
    padding: 0 25px 25px 0; 
    text-align: right; 
} 

.carousel-control.left, 
.carousel-control.right { 
    background-image: none; 
} 

.carousel-containers { 
    padding: 10px 0; 
} 

.carousel-containers { 
    background-color: #fff; 
    color: #555; 
} 

@media screen and (min-width: 768px) { 
    .carousel-containers { 
    padding: 1.5em 0; 
    } 
} 

@media screen and (min-width: 992px) { 
    .container { 
    max-width: 930px; 
    } 
} 

<div class="carousel-containers"> 
    <div class="container"> 

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 

     <ol class="carousel-indicators"> 
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
     </ol> 


     <div class="carousel-inner"> 
     <div class="item active"> 
      <img src="http://placehold.it/800x400" alt="..."> 
      <div class="carousel-caption"> 
      <h2>Heading</h2> 
      </div> 
     </div> 
     <div class="item"> 
      <img src="http://placehold.it/800x400" alt="..."> 
      <div class="carousel-caption"> 
      <h2>Heading</h2> 
      </div> 
     </div> 
     <div class="item"> 
      <img src="http://placehold.it/800x400" alt="..."> 
      <div class="carousel-caption"> 
      <h2>Heading</h2> 
      </div> 
     </div> 
     </div> 


     <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
     </a> 
     <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
     </a> 
    </div> 

    </div> 
</div> 

Answer 2

。ちょうどこれを使った。

@media screen and (max-height: 1000px) { 
.carousel-item { 
height: 24rem; 
}}