Resulta que estoy tratando de hacer una seccion donde se muestran varias imagenes, el formato es que el usuario previamente cargue desde un formulario las imagenes y la cantidad de columnas por bloque/div.
Ahora mi problema es cuando las imagenes dentro de un mismo bloque/div son de diferente tamaño, no se si es por diferente altura o anchura.
Lo que logre hacer es que tengan ambas el mismo tamaño todas dentro del bloque/div pero pierden el contenido, es decir, no se ven completas.
Ahora paso dos capturas, donde la primera es como me queda a mi, y la segunda es como me gustaria, que seria un estilo a lo que hacer behance con las cuadriculas.
Ahora les paso parte del codigo que estoy implementando!
<section id="content-body" class=" " style="">
<input id="{{project.id}}" type="text" class="pid" style="display:none;">
<div class=" mt-20 mb-10 grid place-items-center" style="">
{% for data in projectImages %}
<div x-data="{dropdownOpen: false}" @click.outside="dropdownOpen = false" class="relative group/cuadricula">
<div class="grid max-w-7xl mb-3 gap-3" style=" grid-template-columns: repeat({{data.columns}}, minmax(0, 1fr)); ">
{% for img in data.images.all %}
<div class="overflow-hidden " style=" display:flex;">
<img id="{{img.id}}" class="object-cover w-full transition duration-300 ease-in-out hover:scale-110 click-open-modalZoomImagen" src="{{img.image.url}}" alt="" style=""/>
</div>
{% endfor %}
</div>
<!-- BOTON EDITAR CUADRICULA -->
<div @click="dropdownOpen = !dropdownOpen" class="z-10 absolute top-1 left-1 group/edit ">
<button :class="dropdownOpen ? 'visible' : 'invisible group-hover/cuadricula:visible' " class="btn-editProjectImages bg-black border-0 p-4 rounded text-white hover:text-blue-700 transition ">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 ">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />
</svg>
</button>
<div :class="dropdownOpen ? 'top-full opacity-100 visible' : 'invisible opacity-0' " class="border-light shadow-card absolute left-0 z-10 mt-2 rounded border-0 bg-black text-white py-1 transition-all ">
<a href="{% url 'project-images-edit' p_pk=project.pk pk=data.pk %}" class="text-body-color hover:bg-primary hover:text-primary block py-2 px-5 text-base font-semibold hover:bg-opacity-5 w-full hover:text-blue-700">
Edit
</a>
<a href="{% url 'project-images-delete' p_pk=project.pk pk=data.pk %}" class="text-body-color hover:bg-primary hover:text-primary block py-2 px-5 text-base font-semibold hover:bg-opacity-5 w-full hover:text-blue-700">
Delete
</a>
</div>
</div>
</div>
{% endfor %}
</div>
</section>
Y aca una parte de la hoja de estilo
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#main-content{ min-height: 100vh; margin:0; }
#navbar{ min-height:50px; z-index: 1;}
#main-content{ display:flex; flex-direction:column; }
#content-body{ flex:1; }
#footer{ min-height:50px;}
Desde ya muchas gracias! Espero que me logren comprender y ayudar. Cualquier cosa si necesitan mas detalles, lo paso!
object-fit: cover
developer.mozilla.org/en-US/docs/Web/CSS/object-fit