0

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.

Imagen de como me queda la cuadricula a mi

Imagen de como me queda la cuadricula a behance

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!

1

1 respuesta 1

1

Actualizo el codigo html-django y el css.

Ademas adjunto foto de como quedo y cual es mi nuevo problema!

<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="wrapper-container max-w-7xl mb-3 gap-3">
                
                {% for img in data.images.all %}
                <div class="block-container">
                    <img id="{{img.id}}" class="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> 

*{
    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;}

.wrapper-container{
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    
}

.block-container {
    display: flex;
    max-width: auto;
}

.block-container img {
    width: auto;    
    height: auto;
}

como queda

Ahora mi problema como podran ver es en las tres primeras imagenes!

Voy a seguir intentado solucionarlo, desde ya gracias!

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.