可以使用css或引导创建具有不同大小图像的图像网格吗？

我使用CSS中的以下代码创建了一个包含不同大小图像的网格：

.wrapper{ 
   width: 100%;
   margin: 0px auto;
   display: inline-block;
   text-align:center;
   padding: 25px 40px;
   max-height: 190px;
   margin: 0px auto;
   min-height: 200px;

}

  .table-center{
        padding-top: 15px;
}

/* Image Classes*/

.image-box{
    max-width: 250px;
    max-height: 150px;
    /*float: left;*/
    display: inline-block;
    padding: 0px 40px 30px 40px;
}

---

我把所有大小不一的图片都放进图片框，在我调整浏览器大小之前，一切都很好。有谁能提供更好的解决方案吗？每个尺寸都有响应能力？

一个完整的JSFIDLE或codepen示例会更有帮助，但我可以说：

尝试改用flexbox：

.image-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

---

有关更多信息，请使用

@media

查询。了解他们

基本上，您可以为不同的屏幕分辨率断点设置不同的大小：

@media (max-width: 600px) {
  .image-box{
    max-width: 150px;
    max-height: 50px;
  }
}
@media (max-width: 1000px) {
  .image-box{
    max-width: 250px;
    max-height: 150px;
  }
}

etc...

---

是的，我非常精通媒体查询，我希望避免它们，因为错误只发生在1000px和1200px之间，但看起来这可能是一个不错的选择。谢谢。啊。。。是的，不幸的是，这是唯一的现实选择，我希望很快学习flex box，但不幸的是，上面的代码只是将所有东西排在一行上。是的，很抱歉，我看不到你的整个示例，或者我可以让它工作，并帮助你解决这个问题。否则，我将使用上述答案并使用媒体查询