如何将图像放置在具有不同图像大小的列中答案

【问题标题】：how to place image with in col with different image size如何将图像放置在具有不同图像大小的列中
【发布时间】：2021-08-17 20:15:11
【问题描述】：

我想在带有 bootstrap 4 的容器中显示类似的内容。它应该是响应式的。我怎样才能放置这样的图像。我可以制作悬停效果，但无法获得这样的结果。非常感谢

【问题讨论】：

这对你有帮助吗：Bootstrap 4 Masonry Layout?
你的代码在哪里？
@Nishant 而不是到处张贴where is your code? 你实际上可以提供帮助。向用户指出指导方针以及如何满足这些指导方针。仅仅询问他们的代码在哪里（尤其是新用户或没有经验的用户）可能被认为是粗鲁的。
好！但是如果他们没有找到任何代码，他们如何提供帮助？
@Nishant 就像我说的那样将他们指向指南以及如何在 SO 提问。帮助他们真正提出一个好问题，例如：嗨，欢迎来到 SO。请阅读How to Ask 并添加minimal reproducible example ...对不了解指南的用户更有帮助！除此之外，您可以像我一样做，将它们指向正确的方向（在这种情况下，用户显然正在寻找 Masonry Layout，但很可能不知道要搜索的名称）

标签： html css bootstrap-4

【解决方案1】：

您可以使用基本的 css 来实现这一点 html部分：

<div className="image-grid-light">
    <div className="imageContainer-light">
       <img className="imgs" src={image.url} alt={image.public_id}/>
    </div>
</div>

CSS 部分

.image-grid{
    
    width: 95%;
    
    column-count: 3;
    gap: .5%;
    padding:2.5%;
    
    
}

.image{
    display: inline-block;
    width: 100%;
    height: 100%;
    

}

为了响应，您可以使用@media 并根据需要更改列数

【讨论】：