可以使用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...