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

How to have different size images fluidly respond CSS?

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

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

  • 因为你所有的元素都是百分比宽度，你知道无论容器大小如何，每一行都只会有 4 个元素，所以下面的 css 解决了你的问题本例中的问题

    li:nth-child(4n+1) { clear: left; }

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

  • 将 float:left 替换为 display:inline-block 会给你更多干净的包装效果，但图像将底部对齐而不是像现在这样顶部对齐.

  • 将它们放入正方形中，使您的 li 具有相同的宽度和高度，然后将图像放入 max-width: 100%; max-height: 100%。这将强制一定高度从而解决 float 问题。

    • 如果您希望像许多智能手机图库应用那样将图像裁剪成正方形，您可能更喜欢使用 background-image 和 background-size: cover。这不适用于所有用例。此外，默认情况下不会打印背景图像。

    • 如果你走这条路，你也可以将图像垂直居中。

  • 使用 JavaScript，它给您无限的灵活性，但需要更多的工作。