【发布时间】：2016-02-26 05:32:23
【问题描述】：
我正在尝试创建一个随着页面调整大小而缩放的图像网格。在我的实现中，我对图像进行了缩放，但它们没有在网格中排列。当同一行有不同大小的资产时，较小的资产的高度总是比其他资产短。我如何才能让图像在缩放时保持其纵横比，并且它们的高度都相同？
https://jsfiddle.net/x2wqup0e/1/
<div class="wrapper">
<div class="tile col-1">
<img class="thumb" src="http://www.placehold.it/200x250">
</div>
<div class="tile col-5">
<img class="thumb" src="http://www.placehold.it/1000x250">
</div>
<div class="tile col-2">
<img class="thumb" src="http://www.placehold.it/400x250">
</div>
<div class="tile col-4">
<img class="thumb" src="http://www.placehold.it/800x250">
</div>
<div class="tile col-3">
<img class="thumb" src="http://www.placehold.it/600x250">
</div>
<div class="tile col-3">
<img class="thumb" src="http://www.placehold.it/600x250">
</div>
<div class="tile col-2">
<img class="thumb" src="http://www.placehold.it/400x250">
</div>
<div class="tile col-2">
<img class="thumb" src="http://www.placehold.it/400x250">
</div>
<div class="tile col-2">
<img class="thumb" src="http://www.placehold.it/400x250">
</div>
</div>
.col-1 {
width: 16.5%;
box-sizing: border-box;
}
.col-2 {
width: 33.3%;
box-sizing: border-box;
}
.col-3 {
width: 50.0%;
box-sizing: border-box;
}
.col-4 {
width: 66.6%;
box-sizing: border-box;
}
.col-5 {
width: 83.3%;
box-sizing: border-box;
}
.tile {
float: left;
padding: 5px;
}
.thumb {
width: 100%;
height: auto;
}
编辑 #1 - 我已经删除了每个图块之间的填充，所以现在图块可以正确缩放，同时保持它们的纵横比和高度。然而，我已经失去了创建网格效果的每个瓷砖之间的间距：https://jsfiddle.net/dcgf2coq/1/
【问题讨论】：
-
因为资产有不同的宽度，所以高度总是会随着宽度的变化而变化（因为我们需要保持纵横比）
-
@RRR 有没有办法让每个
.tile的高度保持一致，即使纵横比略有不同？ -
长宽比会折腾...您可以尝试设置
.thumb { width: 100%; height: 100%; }不确定这样做是否正确 -
@Jon 您可以将图像设置为磁贴的背景图像并使用 CSS 裁剪它们。仅当其中一张图片较小时才会发生这种情况是有道理的，因为在具有相同宽度/高度的图片的情况下，所有三张图片的纵横比相同，因此它们的大小将完全相同。
-
@Jon 将
display:flex添加到.tile.tile { float: left; padding: 5px; display:flex; }