1

introducir la descripción de la imagen aquíTengo un problema para hacer que una imagen ocupe el 100% de el ancho de la página; acá les muestro el código HTML:

<body>
    <div id="slider">
        <div id="contenedor">
            <img src="C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg">
            <img src="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg">
            <img src="C:\Users\Public\Pictures\Sample Pictures\Hydrangeas.jpg">
            <img src="C:\Users\Public\Pictures\Sample Pictures\Jellyfish.jpg">
        </div>
    </div>
</body>

Acá el CSS:

body{
    margin: 0;
    padding: 0;
}

#contenedor{
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;

}

#contenedor img{
    margin: 0;
    width: 100%;    
    height: 100%; 
    position: relative;
}

#slider{
 width: 100%;
 height: 100%;
 position: absolute;
}

Pero sucede que no me ocupa todo el ancho de la página, si no que ocupa alrededor de un 75%, solo me lo hace cuando cambio su posición a "absolute" , pero están en un flex y se colocan una sobre otra. No he intentado nada en js porque supongo que se puede solucionar perfectamente en css.

En la anterior imagen, se ve cómo ocupa el 75% la primera imagen y la siguiente se asoma: lo que busco es que ocupe ese espacio rayado en rojo.

0

2 respuestas 2

1

El problema que tienes, es que estás dándole a cada imagen el 100% del ancho de la pantalla. Lo que debes hacer es reducir el tamaño del contenedor de cada imagen. Además por temas de dispositivos, te reomcomiendo usar vw y vh para mejores resultados. (estos ultimos, son un porcentaje del ancho o alto del dispositivo)
Además, para que tus imagenes se vean de mejor modo, usa object-fit, para desplegarlas a gusto.

EJEMPLO

body{
    margin: 0;
    padding: 0;
}

#contenedor{
    display: flex;
    width: 100vw;
    height: 100vh;
    position: absolute;

}

#contenedor img{
    margin: 0;
    width: 25vw;    
    height: 100vh; 
    position: relative;
    object-fit: cover;
}

#slider{
 width: 100%;
 height: 100%;
 position: absolute;
}
<body>
    <div id="slider">
        <div id="contenedor">
            <img src="https://lorempixel.com/output/nature-q-c-1280-720-5.jpg">
            <img src="https://lorempixel.com/output/city-q-c-1280-720-2.jpg">
            <img src="https://lorempixel.com/output/nightlife-q-c-1280-720-1.jpg">
            <img src="https://lorempixel.com/output/nightlife-q-c-1280-720-10.jpg">
        </div>
    </div>
</body>

13
  • Entiendo a lo que te refieres, pero lo que busco es que cada imagen ocupe el ancho de la pantalla, de manera que pueda cambiar entre ellas con un slider y que la siguiente ocupe toda la pantalla, y así
    – VictorM03
    Commented el 12 nov. 2020 a las 13:10
  • 2
    No mencionaste el problema del slider en la publicacion, el problema era con las imagenes, además falta el código relacionado al slider
    – Excorpion
    Commented el 12 nov. 2020 a las 13:12
  • Claro, entiendo la funcionalidad del slider la coloco en el js, pero no consigo hacer que las imagenes ocupen el 100% de la pantalla, es decir cada una el 100% osea basicamente 4 pantallas
    – VictorM03
    Commented el 12 nov. 2020 a las 13:19
  • 1
    Te dejo un slider funcional y suerte con el resto. - jsfiddle.net/naq8bk7p
    – Excorpion
    Commented el 12 nov. 2020 a las 14:04
  • 1
    Agradeceme marcandome como respuesta jaja
    – Excorpion
    Commented el 12 nov. 2020 a las 14:20
0

Encontré una solución, no se como funciona, pero lo hace, metí cada imagen en un div, de esa manera le di el tamaño que quería a cada div e hice que cada imagen cubriera todo su contenedor, no termino de comprender el comportamiento de las imágenes pero intentare descifrarlo.

2
  • 1
    No hay mayor secreto las imágenes son elementos en línea y se colocan en fila una a lado de la otra mientras que los div son elementos en bloque y se colocan uno encima del otro abarcando todo el ancho disponible de su etiqueta contenedora
    – user128299
    Commented el 12 nov. 2020 a las 14:18
  • Pero aun no entiendo porque no podia redimensionar más la imagen mientras estaba fuera del div, es decir por si misma no se redimiensionaba mas a menos que su posicion fuera absolute, pero dentro de un div que ese si me permite establecer un tamaño deseado si podia escalar la imagen como quisiera
    – VictorM03
    Commented el 12 nov. 2020 a las 14:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.