Question

我的列表项目中有不同大小的图像，导致以奇怪的方式将图块推到下面。将不同尺寸的图像（较高的图像）装入容器并使容器具有相同的尺寸并流畅地响应下来的最佳方法是什么？我使用vw作为图像的高度，将图块设置为相同的尺寸，但会导致图像本身变形，但这是最好的方法吗？取消注释示例中的vw以查看。

密码笔：http://codepen.io/anon/pen/NNOWOZ

CSS：

ul{
  overflow:hidden;
  width:50%;
}
li{
  list-style:none;
  float:left;
  margin:2% 1%;
  border:1px solid black;
  width:22%;
}
li img{
  width:100%;
  /*height:10vw;*/
}

Answer 1

正如您所注意到的，float:left可能无法在元素高度不同时提供理想的结果。在您的示例中，它们具有相同的宽度，但具有不同的高度。

由于你的所有元素都是百分比宽度，你知道无论容器大小是多少，每行只有4个元素，所以下面的css在这个例子中解决了你的问题
```
li:nth-child(4n+1) { clear: left; }
```

当每行元素数量变化时，其他选项效果更好

用float:left替换display:inline-block将为您提供更多干净的换行效果，但图像将是底部对齐而不是现在的顶部对齐。
将它们装入正方形，使li s具有相同的宽度和高度，然后将图像放在max-width: 100%; max-height: 100%内。这会强制某个高度，从而解决float问题。
- 如果您希望将图片裁剪为正方形，您可能更愿意使用background-image和background-size: cover，因为许多智能手机图库应用都可以。这对所有用例都不适用。此外，默认情况下不会打印背景图像。
- 如果你走这条路线，你也可以垂直居中。
使用JavaScript可以提供无限的灵活性，但需要更多的工作。

如何让不同大小的图像流畅地响应CSS？

1 个答案: