如何让不同尺寸的图像流畅地响应 CSS？答案

【问题标题】：How to have different size images fluidly respond CSS?如何让不同尺寸的图像流畅地响应 CSS？
【发布时间】：2016-08-22 03:13:45
【问题描述】：

我的列表项中有不同大小的图像，这导致图块以一种奇怪的方式被推到下方。将不同尺寸的图像（较高的图像）放入容器中并使容器具有相同的尺寸并流畅地响应的最佳方法是什么？我使用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;*/
}

【问题讨论】：

标签： css image fluid responsive

【解决方案1】：

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

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

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

将float:left 替换为display:inline-block 会给您带来更清晰的环绕效果，但图像将是底部对齐，而不是现在的顶部对齐。
将它们放入正方形中，使您的lis 具有相同的宽度和高度，然后将带有max-width: 100%; max-height: 100% 的图像放入其中。这将强制一定高度，从而解决float 问题。
- 如果您希望像许多智能手机图库应用程序那样将图像裁剪成正方形，您可能更喜欢使用background-image 和background-size: cover。这不适用于所有用例。此外，默认情况下不会打印背景图像。
- 如果你走这条路线，你也可以垂直居中图像。
使用 JavaScript 为您提供无限的灵活性，但需要更多的工作。

【讨论】：