Question

我有一点问题，我似乎无法解决。

我正在建立一个网站，显示页面上传的图像（图像由用户上传，大小不同）。但不幸的是，它看起来并不是很好，因为它显示了整个图像，如果2在页面上彼此不适合，则第二个被推到新行并在图像旁边留下巨大的间隙1.我想要完成的事情是flickr。

我怎样才能做到这一点？

我有DIV名称图像中的所有图像，所有图像DIVS都在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>

CSS：

#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%
}

Answer 1

好吧，如果你想像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;
}

当然，这取决于你想要显示它们的确切程度，但这是基本原则。

获取多个图像以适应未知图像大小的浏览器大小

1 个答案: