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

Question

我的列表项中有不同大小的图像，这导致图 block 以一种奇怪的方式被推到下面。让不同尺寸的图像(较高的图像)适合容器并使容器具有相同尺寸并流畅响应的最佳方法是什么？我使用了 vw 作为图像上的高度，它将图 block 设置为相同大小，但会导致图像本身被压扁，但这是最好的方法吗？取消注释示例中的 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 具有相同的宽度和高度，然后将图像放入 max-width: 100%;最大高度:100%。这将强制一定高度，从而解决 float 问题。

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

  • 如果采用这种方式，您也可以将图像垂直居中。

• 使用 JavaScript，它为您提供无限的灵 active ，但需要更多的工作。