如何像behance一样在同一个div大小显示两张完整的图片?

问题描述 投票:0回答:1

首先,抱歉我的英语不好

事实证明,我正在尝试制作一个显示多个图像的部分,格式是用户先前从表单加载images和每个block/divcolumns数。

现在我的问题是当同一个block/div内的图像有不同的尺寸时,我不知道是因为不同的高度还是宽度。

我设法做的是使它们具有相同的大小,都在 block/div 内,但是它们丢失了内容,也就是说,它们看起来不完整。

现在我传递两个屏幕截图,其中 first 是它适合我的方式,而 second 是我想要的方式,这将是 behance with the grids 的风格。因为我的英语不好

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

现在是代码

<section id="navbar"></section>
    <section id="main-content">
        <div class="padre">
            <div class="contenedor-imagenes">
                <img src="../media/3.jpg"/ class="imagenes">
                <img src="../media/2.png"/ class="imagenes">
            </div>
            <div class="contenedor-imagenes">
                <img src="../media/room.jpg"/ class="imagenes">
                <img src="../media/skull.jpg"/ class="imagenes">
            </div>
            <div class="contenedor-imagenes">
                <img src="../media/3.jpg"/ class="imagenes">
                <img src="../media/4.png"/ class="imagenes">
            </div>
        </div>
    </section>
    <section id="footer"></section>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#main-content{ min-height: 100vh; margin:0; flex:1;  background: black;}

#navbar{ min-height:50px; z-index: 1;background:red;top: 0;left:0;width: 100%;}

#main-content{ display:flex; flex-direction:column; }

#footer{ min-height:50px;background: red;bottom: 0;left:0; width: 100%;}

.padre{
  background: red;
  display: grid;
  place-items: center;
  width: 100%;
}
.contenedor-imagenes{
  display:flex;
  background: lightblue;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
img{
  max-height: 400px;
}
javascript html css django tailwind-css
1个回答
0
投票

这就是你想要的吧?如果没有得到你的答案,请告诉我。

单击整页结果以正确查看输出。

body{
  background:black;
}

div{
display:flex;
  justify-content:center;
  
}

img{
  border:10px solid white;
}
     <div>
        <img src="https://blog.hootsuite.com/wp-content/uploads/2020/02/Image-copyright-556x556.png"/>
        
        <img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png"/>
        </div>

© www.soinside.com 2019 - 2024. All rights reserved.