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

【问题标题】：Can one create an image grid with different sized images using css or bootstrap?可以使用 css 或 bootstrap 创建具有不同大小图像的图像网格吗？
【发布时间】：2017-09-01 22:44:36
【问题描述】：

我在 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;
}

My images when I resize the window to roughly 1200px

我将所有不同大小的图像放入图像框中，一切正常，直到我调整浏览器大小。谁能提供更好的解决方案？任何尺寸都可以响应？

【问题讨论】：

标签： css image responsive

【解决方案1】：

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

尝试使用 flexbox：

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

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 了解更多信息

【讨论】：

我希望尽快学习 flex-box，但不幸的是，上面的代码只是将所有内容排成一行。
是的，很抱歉我看不到你的整个例子，或者我可以让它工作并以这种方式帮助你。否则我会选择上面的答案并使用媒体查询

【解决方案2】：

您需要使用@media 查询。了解他们here。

基本上，你为不同的屏幕分辨率断点设置不同的尺寸：

@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 之间，但看起来这可能是一个不错的选择。谢谢。
啊...是的，不幸的是，这是唯一真正的选择