Bootstrap 图库：不同高度的照片不会对齐

Question

所以我正在尝试使用 Bootstrap 制作照片库，但我暂时被卡住了。

首先，这里有一个 github link 以便您可以查看该站点。

http://torgian.github.io/website-dev

转到图库并更改浏览器宽度。您可以看到图像的高度不同，但似乎没有正确排列。

我可能花了大约 7 个小时搜索和尝试不同的东西，但无济于事。所以我终于在这里问了。

目前还在学习HTML和CSS，所以还没接触javascript。如果可能的话，我想找到一个 CSS 解决方案。

我想要实现的是类似这样的东西：http://www.nasarow-fo-to.com/new-gallery

点击右下角的方块，你会看到我的画廊弹出：你可以看到我想要实现的目标。桌面上有一排漂亮的均匀缩略图，横跨 3 或 4 个。

Answer 1

我建议将所有图像的 高度 设置为相同的值，然后将 width 样式设置为 auto。之后，将页面溢出样式设置为break-line，它应该正确对齐。

如何执行此操作的示例如下：

body{
    overflow: break-line  //Break the line on content overflow
}
img{
    width: auto;          //Set the width based on the height
    height:10%;           //Set the image hight to 10% of the page
    margin: 20px;         //Set a margin between images
}

Answer 2

你可以给 img 标签指定特定的宽度和高度

img{
width:20%;
height:20%;

}