cssやブートストラップを使って、サイズの異なる画像を持つ画像グリッドを作成できますか？

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

私は、ブラウザのサイズを変更するまではかなりうまく動作します。誰かがより良いソリューションを提供できますか？ 1つはすべてのサイズで応答しますか？

Answer 1

フルjsfiddleまたはcodepenの例では、より参考になるが、私が言うことができます。

ではなく、フレキシボックスを使用してみてください：詳細

Answer 2

ため

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

https://css-tricks.com/snippets/css/a-guide-to-flexbox/をあなたは@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...