Media query pour réduire le carrousel Bootstrap

Question

Je l'ai parfaitement configuré pour savoir comment j'en ai besoin quand je le vois sur mon moniteur. (1920 x 1200) mais voudrait changer sa hauteur en fonction du moniteur des utilisateurs, par exemple 1920 x 1080. J'ai donné à mon carrousel une hauteur de 32rem mais je voudrais diminuer cette taille si un utilisateur est sur un écran plus petit comme je m'a dit. Je crois qu'une requête médiatique est ce dont j'ai besoin mais j'ai essayé et je ne peux pas le comprendre. Quelqu'un peut-il faire la lumière sur ce s'il vous plaît?

Merci.

Answer 1

S'il vous plaît essayer l'exemple ci-dessous et laissez-moi savoir si cela a fonctionné.

.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

réussi à le résoudre seul. Juste utilisé ceci.

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