"首先，抱歉我的英语不好"
原来我试图创建一个显示多个图像的部分，格式是用户先前从表单加载的图像和列/块/格的数量。
现在我的问题是，当同一个block/div中的图像大小不同时，我不知道是因为高度还是宽度不同。
我设法使它们具有相同的大小，都在block/div内，但是它们丢失了内容，也就是说，它们看起来不完整。
现在我传递了两个截图，其中第一个是它如何适合我，第二个是我希望它如何，这将是一个风格behance与网格。
my case
behance case
现在我传递给您我正在实现的部分代码!

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

这是样式表的一部分

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

从已经非常感谢你!我希望你能理解和帮助我。如果你需要更多的细节，我会转达它!如果他们这样做只有CSS没有顺风，没有问题!

• • 更新**

我将传递一个html和css代码与我试图以后适应它的主要。我也将张贴一张照片，它看起来如何和另一张照片，我希望它看起来如何
my case
behance case
现在代码
一个二个一个一个
所用图像
https://res.cloudinary.com/demonjl/image/upload/v1677406549/Stack%20Overflow/2_g75230.png
https://res.cloudinary.com/demonjl/image/upload/v1677406547/Stack%20Overflow/4_bgqwvo.png
https://res.cloudinary.com/demonjl/image/upload/v1677406542/Stack%20Overflow/room_m3gvoh.jpg
https://res.cloudinary.com/demonjl/image/upload/v1677406541/Stack%20Overflow/skull_qtv0bs.jpg
https://res.cloudinary.com/demonjl/image/upload/v1677406541/Stack%20Overflow/3_hveyv2.jpg