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
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: