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

Question

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

• 1 行，里面有 3 张图像。
• 1 行，里面有 2 张图像。

如何使 100% 宽度容器内的图像具有相同的高度？

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

这是到目前为止我使用 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

.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 高度值设置为您觉得舒服的值即可。