html - さまざまなサイズの画像を設定して、それらの間のすべてのスペースを占めるにはどうすればよいですか

Question

こんにちは、空白の場所を残さずにさまざまなスペースに収まるように、さまざまなサイズの複数の画像をリストできる写真表示を作成しようとしています。私が達成しようとしていることの例は、このサイトで見ることができます: http://www.morgannorman.com/

これが私のhtmlのプレビューと、画像の設定方法です。

<div class="feature-list"> <div class="feat" id="one"> <img src="galleries/display/pic1.jpg"> <img src="galleries/display/pic6.jpg"> <img src="galleries/display/pic3.jpg"> <img src="galleries/display/pic4.jpg"> <img src="galleries/display/pic5.jpg"> <img src="galleries/display/pic2.jpg"> <img src="galleries/display/pic3.jpg"> <img src="galleries/display/pic4.jpg"> <img src="galleries/display/pic1.jpg"> <img src="galleries/display/pic2.jpg"> <img src="galleries/display/pic3.jpg"> <img src="galleries/display/pic4.jpg"> </div> </div>

そして私のCSS：

.feature-list {
    width: 100%;
    padding: 10% 0;
}

.feat {
    width: 100%;
    position: relative;
}

.feat img {
    width: 25%;
    float: left;
}