Question

我正在尝试创建一个在页面调整大小时缩放的图像网格。在我的实现中，我有图像缩放，但他们没有在网格中排队。当同一行中存在不同大小的资产时，较小资产的高度始终短于其他资产。我怎样才能让图像在缩放时保持纵横比，它们的高度都是一样的？

<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/

Answer 1

请试试这个，我认为这是你的需要吗？

<div class="wrapper">
  <div class="tile col-3">
    <img class="thumb" src="http://www.placehold.it/200x250">
  </div>
  <div class="tile col-3">
    <img class="thumb" src="http://www.placehold.it/1000x250">
  </div>
  <div class="tile col-3">
    <img class="thumb" src="http://www.placehold.it/400x250">
  </div>
  <div class="tile col-3">
    <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-3">
    <img class="thumb" src="http://www.placehold.it/400x250">
  </div>
  <div class="tile col-3">
    <img class="thumb" src="http://www.placehold.it/400x250">
  </div>
  <div class="tile col-3">
    <img class="thumb" src="http://www.placehold.it/400x250">
  </div>
</div>

的CSS：

.tile {
    float: left;
    padding: 5px;
}

如何创建可扩展的图像网格

1 个答案: