填充容器宽度的等高图像网格

Question

这就是我想要实现的目标：

1行，里面有3张图片。 1行，里面有2张图片。

如何让100％-width-container中的图像具有相同的高度？

所有图像的宽度和高度不一致。 我需要图像来保持它们的裁剪和宽高比。 它们不需要具有相同的宽度。

到目前为止，这是我用flex-box实现的。但他们没有相同的高度。有帮助吗？我不介意用javascript来解决这个问题

我宁愿不为容器或图像设置高度值。 有没有办法让图像在高度相同的情况下均匀分布？

.wrapper {
  width:100vw; /*should be width of browser*/
  display:flex;
  margin:0;
  padding:0;
  margin:0;
  border:1px solid;
}

.image {
  list-style:none;
  margin: 50px 1.5%;
}
.image:first-child {
  margin-left:0;
}
.image:last-child {
  margin-right:0;
}
img {
  width:100%
}

<ul class="wrapper three_images">
  <li class="image"><img src="http://lorempixel.com/600/800/"></li>
  <li class="image"><img src="http://lorempixel.com/400/850/"></li>
  <li class="image"><img src="http://lorempixel.com/550/700/"></li>
</ul>



<ul class="wrapper two_images">
  <li class="image"><img src="http://lorempixel.com/600/800/"></li>
  <li class="image"><img src="http://lorempixel.com/400/850/"></li>
</ul>

Answer 1

您可以在两个轴上使用object-fit和尺寸img，它会自行裁剪：

您还可以使用object-position，image-orientation，image-rendering

对此进行调整

img {
  width:100%;
  height:100%;
  object-fit: cover;
}

.wrapper {
  width:100vw; /*should be width of browser*/
  display:flex;
  margin:0;
  padding:0;
  margin:0;
  border:1px solid;
}
body {margin:0;}

.image {
  list-style:none;
  margin: 50px 1.5%;
}
.image:first-child {
  margin-left:0;
}
.image:last-child {
  margin-right:0;
}
img {
  width:100%;
  height:100%;
  object-fit: cover;
}

<ul class="wrapper three_images">
  <li class="image"><img src="http://lorempixel.com/600/800/"></li>
  <li class="image"><img src="http://lorempixel.com/400/850/"></li>
  <li class="image"><img src="http://lorempixel.com/550/700/"></li>
</ul>



<ul class="wrapper two_images">
  <li class="image"><img src="http://lorempixel.com/600/800/"></li>
  <li class="image"><img src="http://lorempixel.com/400/850/"></li>
</ul>

请参阅：http://caniuse.com/#search=object-fit

它的工作方式基本上就像是在背景中设置图像并通过背景大小，背景位置调整大小，但只是相似，行为和语义不相同：（

Answer 2

.wrapper {
  width:100vw; /*should be width of browser*/
  display:flex;
  margin:0;
  padding:0;
  margin:0;
  border:1px solid;
}

.image {
  list-style:none;
  margin: 50px 1.5%;
  height: 100px; /* SET THIS */
  overflow: hidden;
}
.image:first-child {
  margin-left:0;
}
.image:last-child {
  margin-right:0;
}
img {
  width:100%
  height: 100%;
}

试试这个。只需将.image高度值设置为您认为合适的任何值。