2

Estoy intentando realizar una cuadricula de imagenes donde se vean en su relacion de aspecto pero adaptadas a un ancho de bloque definido.

Cada bloque tiene una cantidad n de imagenes donde sus tamaños y alturas no siempre van a ser las mismas.

Behance no se como hace esto, al parecer hace algun calculo para modificarles el width a cada iamges para que se adapten al bloque en su total.

Ahora les voy a compartir unas imagenes y un codigo simple para ver si me pueden ayudar! Desde ya, muchas gracias!

 <div class="container" style="max-width: 1400px;">

    <div class="container_img" style="margin-top: 1rem; margin-bottom: 1rem;position: relative;flex-grow: 500px;display: flex;align-items: center;justify-content: center;">
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406541/Stack%20Overflow/3_hveyv2.jpg" alt=""  style="width: 100%;height: auto;">
        </div>
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406549/Stack%20Overflow/2_g75230.png" alt=""  style="width: 100%;height: auto;">
        </div>
    </div>

    <picture>
        <div class="container_img" style="margin-top: 1rem; margin-bottom: 1rem;position: relative;display: flex;align-items: center;justify-content: center;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406549/Stack%20Overflow/2_g75230.png" alt=""  style="max-width: 100%;height: auto;vertical-align: middle;">
        </div>
    </picture>

    <div class="container_img" style="margin-top: 1rem; margin-bottom: 1rem;position: relative;flex-grow: 500px;display: flex;align-items: center;justify-content: center;">
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406541/Stack%20Overflow/skull_qtv0bs.jpg" alt=""  style="width: 100%;height: auto;">
        </div>
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406542/Stack%20Overflow/room_m3gvoh.jpg" alt=""  style="width: 100%;height: auto;">
        </div>
    </div>

    <div class="container_img" style="margin-top: 1rem; margin-bottom: 1rem;position: relative;flex-grow: 500px;display: flex;align-items: center;justify-content: center;">
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406541/Stack%20Overflow/3_hveyv2.jpg" alt=""  style="width: 100%;height: auto;">
        </div>
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406541/Stack%20Overflow/3_hveyv2.jpg" alt=""  style="width: 100%;height: auto;">
        </div>
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406541/Stack%20Overflow/3_hveyv2.jpg" alt=""  style="width: 100%;height: auto;">
        </div>
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406541/Stack%20Overflow/3_hveyv2.jpg" alt=""  style="width: 100%;height: auto;">
        </div>
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406541/Stack%20Overflow/3_hveyv2.jpg" alt=""  style="width: 100%;height: auto;">
        </div>
    </div>
</div>

Asi es como me queda a mi

Asi es como me queda a mi

Y asi es como me gustaria que quedara

Y asi es como me gustaria que quedara


Update

Gracias a una respuesta pude avanzar en lo que busco, asi que dejo el codigo.

<div class="container" style="max-width: 1400px;">

    <div class="container_img" style="margin-top: 1rem; margin-bottom: 1rem;position: relative;flex-grow: 500px;display: flex;align-items: center;justify-content: center;">
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406541/Stack%20Overflow/3_hveyv2.jpg" alt="" >
        </div>
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406549/Stack%20Overflow/2_g75230.png" alt="" >
        </div>
    </div>

    <picture>
        <div class="container_img" style="margin-top: 1rem; margin-bottom: 1rem;position: relative;display: flex;align-items: center;justify-content: center;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406549/Stack%20Overflow/2_g75230.png" alt=""  >
        </div>
    </picture>

    <div class="container_img" style="margin-top: 1rem; margin-bottom: 1rem;position: relative;flex-grow: 500px;display: flex;align-items: center;justify-content: center;">
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406541/Stack%20Overflow/skull_qtv0bs.jpg" alt="">
        </div>
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406542/Stack%20Overflow/room_m3gvoh.jpg" alt="">
        </div>
    </div>

    <div class="container_img" style="margin-top: 1rem; margin-bottom: 1rem;position: relative;flex-grow: 500px;display: flex;align-items: center;justify-content: center;">
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406541/Stack%20Overflow/3_hveyv2.jpg" alt="">
        </div>
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406541/Stack%20Overflow/3_hveyv2.jpg" alt="">
        </div>
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406541/Stack%20Overflow/3_hveyv2.jpg" alt="">
        </div>
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406541/Stack%20Overflow/3_hveyv2.jpg" alt="">
        </div>
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406541/Stack%20Overflow/3_hveyv2.jpg" alt="">
        </div>
    </div>
</div>
.container_img {
  display: flex;
}

.container_img img {
  width: auto;
  max-height: 200px;
  max-width: 100%;  /* evita deformaciones*/
  flex-shrink: 1; /* escala la imagen para que todas quepan en la misma línea */
}

Ahora voy a intentar mejorarlo para una excepcion la cual es cuando todas las imagenes son del mismo formato.

Dejo adjunto una imagen para darse cuenta:

formato a buscar

2
  • De que trata tu edición? si te sirvió la respuesta debes verificarla, no editar tu pregunta para mencionar que te sirvió tal respuesta... Si tienes otro nuevo problema, puedes hacer otra pregunta... Commented el 27 feb. 2023 a las 13:28
  • Hola! Trata de que mi usuario cargue imagenes un poco al estilo behance, lo estoy haciendo con django y me enrede en el problema de la visualizacion. Basicamente sube una cierta cantidad de imagenes por bloque dentro de un bloque-main. Recien modifique el codigo de una respuesta y creo que quedo bien. De igual manera a la tarde lo compruebo 100%. Y gracias por el tip! Lo voy a tener en cuenta. Commented el 27 feb. 2023 a las 13:35

1 respuesta 1

3

Con CSS puedes hacer lo siguiente: definir una altura máxima y declarar el ancho como "automático", lo que significa que el ancho es el necesario para que la proporción de la imagen original se mantenga. Añadiendo además un ancho máximo (max-width), para evitar que intente una imagen ocupar todo (lo que la deformaría) y capacidad para encogerse si es necesario (flex-shrink), conseguimos que las imágenes se reduzcan para que no sobresalgan ni ocupen dos líneas:

.container_img {
  display: flex;
}

.container_img img {
  width: auto;
  max-height: 200px;
  max-width: 100%;  /* evita deformaciones*/
  flex-shrink: 1; /* escala la imagen para que todas quepan en la misma línea */
}
<div class="container" style="max-width: 1400px;">

    <div class="container_img" style="margin-top: 1rem; margin-bottom: 1rem;position: relative;flex-grow: 500px;display: flex;align-items: center;justify-content: center;">
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406541/Stack%20Overflow/3_hveyv2.jpg" alt="" >
        </div>
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406549/Stack%20Overflow/2_g75230.png" alt="" >
        </div>
    </div>

    <picture>
        <div class="container_img" style="margin-top: 1rem; margin-bottom: 1rem;position: relative;display: flex;align-items: center;justify-content: center;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406549/Stack%20Overflow/2_g75230.png" alt=""  >
        </div>
    </picture>

    <div class="container_img" style="margin-top: 1rem; margin-bottom: 1rem;position: relative;flex-grow: 500px;display: flex;align-items: center;justify-content: center;">
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406541/Stack%20Overflow/skull_qtv0bs.jpg" alt="">
        </div>
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406542/Stack%20Overflow/room_m3gvoh.jpg" alt="">
        </div>
    </div>

    <div class="container_img" style="margin-top: 1rem; margin-bottom: 1rem;position: relative;flex-grow: 500px;display: flex;align-items: center;justify-content: center;">
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406541/Stack%20Overflow/3_hveyv2.jpg" alt="">
        </div>
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406541/Stack%20Overflow/3_hveyv2.jpg" alt="">
        </div>
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406541/Stack%20Overflow/3_hveyv2.jpg" alt="">
        </div>
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406541/Stack%20Overflow/3_hveyv2.jpg" alt="">
        </div>
        <div class="sub_container_img" style="display: flex;">
            <img src="https://res.cloudinary.com/demonjl/image/upload/v1677406541/Stack%20Overflow/3_hveyv2.jpg" alt="">
        </div>
    </div>
</div>

3
  • He añadido algunos detalles para que todo ajuste, la respuesta original no tenía en cuenta el reducir las imágenes para que siempre ocupen una línea Commented el 27 feb. 2023 a las 10:08
  • Hola, muchas gracias por responder y solucionar mi problema! Entendi bastante lo que explicaste. Lo implente a mi proyecto y va genial excepto en una sola opcion!. La cual es cuando solo se usan imagenes(finitas). Es solo un pequeño capricho que me gustaria resolver, lo voy a intentar y si lo consigo o algo muy cercano, lo subo como update!!! Desde ya, muchas gracias y espero ver si vos lo podes resolver tambien!! Voy a hacer un update con tu codigo y una imagen de como voy a buscar que quede! Commented el 27 feb. 2023 a las 12:45
  • Ok, creo que lo logre, y es cambiando el valor de max-height y el de max-width que agregue a un contenedor main. Mas a la tarde lo compruebo bien y agrego un 2do update! Gracias! Commented el 27 feb. 2023 a las 13:28

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.