2

Hola y gracias de antemano por todas las respuestas que me puedan dejar ^^. Mi problema o duda esta en que trato de que mis imagenes agrupadas por flex-wrap hagan scroll unicamente hacia abajo sin embargo no entiendo porque se hace un pequeño scroll al costado no se supone que 100vw es todo el ancho del documento o pantalla.

Por otro lado note que si mis imagenes no hacen scroll hacia abajo tampoco se hace scroll al costado.

introducir la descripción de la imagen aquí

El CSS que uso es:

*{ 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  user-select: none; 
  color: white; 
} 
body{ 
    background-color: black; 
} 
.cabecera{ 
         width: 100vw; 
         max-width: 100vw; 
         height: 50vh; 
         background-color: orange; 
} 
.contenido{ 
        width: 100vw; 
        max-width: 100vw; 
        max-height: 100%; 
        display: flex; 
        flex-wrap: wrap; 
} 
.contenido img{
        width: 25vw; 
        height: 20vh; 
}

El documento HTML que uso es:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <header class="cabecera"></header>

    <main class="contenido">
        <img src="https://lorempixel.com/400/200" alt="">
        <img src="https://lorempixel.com/400/200" alt="">
        <img src="https://lorempixel.com/400/200" alt="">
        <img src="https://lorempixel.com/400/200" alt="">
        <img src="https://lorempixel.com/400/200" alt="">
        <img src="https://lorempixel.com/400/200" alt="">
        <img src="https://lorempixel.com/400/200" alt="">
        <img src="https://lorempixel.com/400/200" alt="">
        <img src="https://lorempixel.com/400/200" alt="">
        <img src="https://lorempixel.com/400/200" alt="">
        <img src="https://lorempixel.com/400/200" alt="">
        <img src="https://lorempixel.com/400/200" alt="">
    </main>
</body>
</html>
8
  • Hola, te sugiero que no pongas tu codigo como una imagen sino que lo pegues para que podamos utilizarlo. el 26 ago. 2020 a las 15:31
  • Debes colocar el código en la pregunta, no en imágenes, así es mas dificl ayudarte, ya que el código debe probarse antes de ayudarte a encontrar una solución.
    – Elboy
    el 26 ago. 2020 a las 15:33
  • Claro franco lo siento soy nuevo, uhmmm como estoy trabajando con imagenes locales pues dejo el codigo de mi css el 26 ago. 2020 a las 15:34
  • puedes poner el codigo el 26 ago. 2020 a las 15:35
  • *{ margin: 0; padding: 0; box-sizing: border-box; user-select: none; color: white; } body{ background-color: black; } .cabecera{ width: 100vw; max-width: 100vw; height: 50vh; background-color: orange; } .contenido{ width: 100vw; max-width: 100vw; max-height: 100%; display: flex; flex-wrap: wrap; } .contenido img{ width: 25vw; height: 20vh; } el 26 ago. 2020 a las 15:40

2 respuestas 2

1

Cambia el 100vw de tus contenedores a:

.cabecera, contenido {width: 100%;}

y quita el max-width, y cambia el ancho de tus imágenes a:

.contenido img {width: 25%; height: auto;}

No en todos los casos se debe usar vw y vh.

1
  • punto a favor es correcto lo comprobe el 26 ago. 2020 a las 16:03
1

Debes utilizar en tus width '%' en lugar de 'vw' y eliminar los max-width que has utilizado.

*{ margin: 0; padding: 0; box-sizing: border-box; user-select: none; color: white; } body{ background-color: black; } .cabecera{ width: 100%; height: 50vh; background-color: orange; } .contenido{ width: 100%; display: flex; flex-wrap: wrap; } .contenido img{ width: 25%; height: auto; }
<body>
    <header class="cabecera"></header>

    <main class="contenido">
        <img src="https://bangho.vteximg.com.br/arquivos/ids/159284-360-360/pc-completa-optima-b08-a6-amd-4gb?v=637267958411870000" alt="">
        <img src="https://bangho.vteximg.com.br/arquivos/ids/159284-360-360/pc-completa-optima-b08-a6-amd-4gb?v=637267958411870000" alt="">            <img src="https://bangho.vteximg.com.br/arquivos/ids/159284-360-360/pc-completa-optima-b08-a6-amd-4gb?v=637267958411870000" alt="">            <img src="https://bangho.vteximg.com.br/arquivos/ids/159284-360-360/pc-completa-optima-b08-a6-amd-4gb?v=637267958411870000" alt="">            <img src="https://bangho.vteximg.com.br/arquivos/ids/159284-360-360/pc-completa-optima-b08-a6-amd-4gb?v=637267958411870000" alt="">            <img src="https://bangho.vteximg.com.br/arquivos/ids/159284-360-360/pc-completa-optima-b08-a6-amd-4gb?v=637267958411870000" alt="">            <img src="https://bangho.vteximg.com.br/arquivos/ids/159284-360-360/pc-completa-optima-b08-a6-amd-4gb?v=637267958411870000" alt="">            <img src="https://bangho.vteximg.com.br/arquivos/ids/159284-360-360/pc-completa-optima-b08-a6-amd-4gb?v=637267958411870000" alt="">            <img src="https://bangho.vteximg.com.br/arquivos/ids/159284-360-360/pc-completa-optima-b08-a6-amd-4gb?v=637267958411870000" alt="">            <img src="https://bangho.vteximg.com.br/arquivos/ids/159284-360-360/pc-completa-optima-b08-a6-amd-4gb?v=637267958411870000" alt="">            <img src="https://bangho.vteximg.com.br/arquivos/ids/159284-360-360/pc-completa-optima-b08-a6-amd-4gb?v=637267958411870000" alt="">            <img src="https://bangho.vteximg.com.br/arquivos/ids/159284-360-360/pc-completa-optima-b08-a6-amd-4gb?v=637267958411870000" alt="">
    </main>
</body>

2
  • Por qué este fragmento de código resuelve la pregunta? Procura siempre hacer una breve descripción, cómo lo deben usar, etc.
    – Alfabravo
    el 26 ago. 2020 a las 16:06
  • Acabo de ver que @Elboy lo ha resuelto de igual manera y explicado correctamente. Voy a dejar su respuesta como la correcta. el 26 ago. 2020 a las 16:08

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.