首先,抱歉我的英语不好
事实证明,我正在尝试制作一个显示多个图像的部分,格式是用户先前从表单加载images和每个block/div的columns数。
现在我的问题是当同一个block/div内的图像有不同的尺寸时,我不知道是因为不同的高度还是宽度。
我设法做的是使它们具有相同的大小,都在 block/div 内,但是它们丢失了内容,也就是说,它们看起来不完整。
现在我传递两个屏幕截图,其中 first 是它适合我的方式,而 second 是我想要的方式,这将是 behance with the grids 的风格。因为我的英语不好
现在我向您传递我正在实现的部分代码!
<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 代码,以及我稍后要尝试使其适应主要内容的代码。 我还将发布一张它的外观照片和另一张我希望它看起来如何的照片
现在是代码
<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;
}
这就是你想要的吧?如果没有得到你的答案,请告诉我。
单击整页结果以正确查看输出。
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>