Larghezza di carosello di bootstrap e altezza

Question

Sto cercando di fare un carosello di bootstrap con larghezza totale per le immagini (larghezza: 100%) e un'altezza fissa ma se imposto la larghezza al 100% l'altezza automaticamente prende il 100% anche

non fare sicuro se il problema è nei miei file

<div id="myCarousel" class="carousel slide"> 
<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> 
<!-- Carousel items --> 
<div class="carousel-inner"> 
    <div class="active item"> 
    <%= image_tag "slider/slide-bg-1.jpg", class: "tales" %> 
    </div> 
    <div class="item"> 
    <%= image_tag "slider/slide-bg-2.jpg", class: "tales" %> 
    </div> 
    <div class="item"> 
    <%= image_tag "slider/slide-bg-3.jpg", class: "tales" %> 
    </div> 
</div> 
<!-- Carousel nav --> 
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 

e il mio file css

.tales { 
    width: 100%; 
    height: 200px; 
} 

Answer 1

Stai cercando di renderlo reattivo? Se siete allora vorrei solo consiglio il seguente:

.tales { 
    width: 100%; 
} 
.carousel-inner{ 
    width:100%; 
    max-height: 200px !important; 
} 

Tuttavia, il modo migliore per gestire questa responsively sarebbe attraverso l'utilizzo di media query come ad esempio:

/* Smaller than standard 960 (devices and browsers) */ 
@media only screen and (max-width: 959px) {} 

/* Tablet Portrait size to standard 960 (devices and browsers) */ 
@media only screen and (min-width: 768px) and (max-width: 959px) {} 

/* All Mobile Sizes (devices and browser) */ 
@media only screen and (max-width: 767px) {} 

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 
@media only screen and (min-width: 480px) and (max-width: 767px) {} 

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ 
@media only screen and (max-width: 479px) {} 

Answer 2

Ehi ragazzi ho avuto la stesso problema,

mia altezza cambiato alla sua altezza originale mentre la mia presentazione è stata animando a sinistra, (in un sito web reattivo)

così ho riparato con i CSS solo :

.carousel .item.left img{ 
    width: 100% !important; 
} 

Answer 3

So che questo è un messaggio vecchio ma Bootstrap è ancora vivo e vegeto!

Leggermente diverso da @ post di Eduardo, ho dovuto modificare:

#myCarousel.carousel.slide { 
    width: 100%; 
    max-width: 400px; !important 
} 

Quando ho modificato solo .carousel-inner {}, l'immagine reale è stata fissata dimensioni, ma i/controlli Destra Sinistra sono stati la visualizzazione in modo non corretto fuori al lato della div.

Answer 4

raccomando quanto segue per Bootstrap 3

.carousel-inner > .item > img, 
.carousel-inner > .item > a > img { 
    min-height: 500px; /* Set slide height here */ 

} 

Answer 5

Se si utilizza bootstrap 4 Alpha e si dispone di un errore con l'altezza delle immagini in cromo, ho una soluzione: La documentazione di bootstrap 4 dice:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> 
    <div class="carousel-inner" role="listbox"> 
    <div class="carousel-item active"> 
     <img class="d-block img-fluid" src="..." alt="First slide"> 
    </div> 
    <div class="carousel-item"> 
     <img class="d-block img-fluid" src="..." alt="Second slide"> 
    </div> 
    <div class="carousel-item"> 
     <img class="d-block img-fluid" src="..." alt="Third slide"> 
    </div> 
    </div> 
</div> 

Soluzione:

La soluzione è quella di mettere "div" intorno all'immagine, con il ".container" di classe, come questo:

<div class="carousel-item active"> 
    <div class="container"> 
    <img src="images/proyecto_0.png" alt="First slide" class="d-block img-fluid"> 
    </div> 
</div> 

Answer 6

appena messo height = "400px" in attributo di immagine come

<img class="d-block w-100" src="../assets/img/natural-backdrop.jpg" height="400px" alt="First slide">