Php 获取多个图像以调整到未知图像大小的浏览器大小

我这里有个小问题，我似乎无法解决

我正在制作一个网站，在页面上显示上传的图片（图片由用户上传，大小不一样）。但不幸的是，它在所有这些方面看起来都不好，因为它显示了整个图像，如果页面上的两个图像不相邻，则第二个图像会被下推到一个换行，并在图像1旁边留下一个巨大的间隙。我想要完成的是这样的事情

我怎样才能做到这一点

我有一个DIV name images中的所有图像，所有图像DIV都在DIV inhoud中

HTML和PHP:

<div id="inhoud">

            <?php 
            include('dbc.php');

            $sql = "SELECT * FROM tbl_images";
            $result = $dbc->query($sql);

            if ($result->num_rows > 0) {
                while($row = $result->fetch_assoc()) {
                    ?>
                    <div class="image"><img src=<?php echo "uploads/".$row['link'] ?>></img><div class="info"><p><?php echo "By " . $row['user'] ?></p></div></div>
                    <?php 
                }
            } else {
                echo "0 results";
            }
            $dbc->close();


            ?>
</div>

#inhoud{
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: grey;
padding-top: 100px;
}
.image{
vertical-align: top;
display: inline-block;
}
.image img{
max-width: 100%
}

---

好吧，如果你想像Flickr一样做——它保持一个固定的行高，并且有可变的图像宽度——那么你应该可以用CSS来做这件事

您需要做的是为图像设置一个设置的高度，然后将“宽度”设置为“自动”。所以，如果你想让每一行有一个高度，比如说20%：

#inhound {
  height:900px; /* if you want to use a percentage make sure its parent has a height */
}

.image img {
  height:20%;
  width:auto;
}

---

当然，这取决于您希望如何准确地显示它们，但这是基本原则。

您需要获得一个JS插件，如Mashine或同位素。我同意@AustineDeveloper。这里有一个很好的网站开始：@austindeveloper谢谢！我现在要试着补砖石