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

Question

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

我把不同大小的所有图像转换为图像框，一切工作得很好，直到我调整浏览器。谁能提供更好的解决方案？一个人会对每一个尺寸都有反应吗？

Answer 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/更多信息

Answer 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...