Este equipo redactor ha pasado horas investigando soluciones a tus dudas, te regalamos la resolución así que deseamos que te resulte de mucha apoyo.
Solución:
Tiene una altura fija para el carrusel y los elementos del carrusel. Entonces, obviamente, será de ese tamaño.
Prueba esto
html,body
height:100%;
.carousel,.item,.active
height:100%;
.carousel-inner
height:100%;
Mire esta pregunta para ver una demostración y más.
Incluso después de cambiarlo no funcionará, puede reemplazar su carrusel con este aquí DEMO
También a través de jquery primero puede obtener la altura total de las ventanas y configurarla a la altura de la envoltura del carrusel y otros elementos según corresponda.
$(document).ready(function()
var height = $(window).height(); //getting windows height
jQuery('#myCarousel').css('height',height+'px'); //and setting height of carousel
);
Después de intentar jugar con la versión actual del carrusel proporcionado en el sitio web de Bootstrap, pensé que tratar de encontrar una solución para el código proporcionado sería más problemático de lo que vale la pena.
Entonces, encontré este ejemplo en su lugar y simplemente reemplacé el HTML del carrusel con el proporcionado por su fuente, comenzando en el ‘encabezado’ y reemplacé la parte del carrusel en el carousel.css con su parte full-slider.css.
El código final se parece a esto:
HTML
Caption 1
Caption 2
Caption 3
CSS
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
.carousel,
.item,
.active
height: 100%;
margin-bottom: 60px;
.carousel-inner
height: 100%;
/* Background images are set within the HTML using inline CSS, not here */
.fill
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
En mi opinión, esta versión es mucho más fácil de leer de todos modos. ¡Gracias a @KC por la ayuda!
Un poco tarde para la fiesta … pero bastante tarde, supongo que nunca.
De todos modos, tomé un enfoque diferente para esto.
CSS:
html, body, .carousel, .carousel-inner, .carousel-inner .item
height: 100%;
.Outside
background-image: url("../Your/Image/Path/Outside.jpg");
z-index: -2;
display: block;
position: fixed;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
HTML:
Espero que esto ayude.
No se te olvide dar recomendación a esta crónica si te ayudó.