Reducción de la altura de las imágenes del carrusel

Tengo un carrusel en mi página de índice, pero he notado que si achico mi navegador, la imagen no permanece dentro de todo el carrusel.

Si no entiende lo que quiero decir, aquí hay una imagen del carrusel después de reducir el tamaño del navegador: enter image description here

Como puede ver, el ancho de la imagen responde al tamaño de la ventana del navegador, pero la altura no, dejando ese gran espacio en blanco debajo de la imagen.

Aquí está mi código actual:

<div class='carousel slide' id='hero' style='position: absolute;'>
<div class='carousel-inner' style='z-index: -1'>
<div class='active item'>
    <img src='images/index/img1.jpg'>
</div>
<div class='item'>
    <img src='images/index/img2.jpg'>
</div>
<div class='item'>
    <img src='images/index/img3.jpg'>
</div>
<div class='item'>
    <img src='images/index/img4.jpg'>
</div>
<div class='item'>
    <img src='images/index/img5.jpg'>
</div>
<div class='item'>
    <img src='images/index/img6.jpg'>
</div>
</div>
</div>

¿Cómo hago para que las imágenes dentro del carrusel respondan a ventanas de navegador más pequeñas?

preguntado el 13 de enero de 13 a las 21:01

Así que lo arreglé yo mismo después de investigar un poco más. En el CSS, tenía esto: .carousel-inner { overflow:hidden; ancho: 100%; posición: relativa; } Lo arreglé poniendo las dimensiones de las imágenes en lugar del 100% del ancho, así: .carousel-inner { overflow:hidden; ancho: 1920px; altura: 1200px; posición: relativa; } -

¡estupendo! Debe enviar eso como la respuesta y marcar la pregunta como respondida. -

1 Respuestas

Así que lo arreglé yo mismo después de investigar un poco más.

En el CSS, tenía esto:

.carousel-inner {
    overflow:hidden;
    width:100%;
    position:relative;
}

Lo arreglé poniendo las dimensiones de las imágenes en lugar del 100% de ancho, así:

.carousel-inner {
    overflow:hidden;
    width:1920px;
    height:1200px;
    position:relative;
}

Respondido el 14 de enero de 13 a las 17:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.