获取多个图像以调整到具有未知图像大小的浏览器大小答案

【问题标题】：Get multiple images to adjust to browser size with unknown image sizes获取多个图像以调整到具有未知图像大小的浏览器大小
【发布时间】：2014-11-12 03:03:28
【问题描述】：

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

我正在制作一个在页面上显示上传图片的网站（图片由用户上传，大小不同）。但不幸的是，它看起来一点也不好看，因为它显示了整个图像，如果 2 在页面上彼此不适合，第二个将被推到换行符并在图像 1 旁边留下一个巨大的间隙。我想要完成的是这样的flickr。

我怎样才能做到这一点？

我将所有图像都放在一个 DIV 名称 images 中，并且所有图像 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%
}

【问题讨论】：

你需要一个 JS 插件，比如 Masonry 或 Isotope。
我同意@austinthedeveloper。这是一个很好的开始网站：isotope.metafizzy.co/layout-modes/masonry.html
@austinthedeveloper 谢谢！我现在要尝试补充砌体

标签： php html css image size

【解决方案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;
}

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

【讨论】：