html - 将多张不同尺寸的图片排成固定宽度并调整高度

Question

考虑 3(或更多)图像，所有不同的尺寸和宽高比在一个固定宽度的 div 中(例如 width:100%):

<div class="image-row">
   <img src="1.png">
   <img src="2.png">
   <img src="3.png">
</div>

如何强制所有图像具有相同的高度和它们的总宽度以填充容器的宽度(即如何使图像整齐排列)？

我已经尝试了 flex 或 inline-block 或 nowrap 的各种组合以与 height:100% 或 object-fit 一起正常工作，但似乎没有任何效果。我放宽了纵横比，剪切了部分图像，或者高度不相等。

在“英语伪代码”中，该过程听起来很简单 - 分别重新缩放到一个单位高度，然后作为一个组重新缩放到给定的宽度，同时保持纵横比。是否存在 CSS 无法执行的特定步骤？

Answer 1

我认为将图像设置为背景图像可能会有所帮助。这样您就可以使用 background-size:cover 将不同尺寸的图像填充到相同的宽度/高度 div 中。如果每个图像的纵横比不同，我不认为所有图像都具有相同的高度而不切断部分。您还可以尝试调整每张图片的 background-position 以至少让您的图片在 div 中居中，或者尝试编辑/裁剪照片以获得相同的纵横比。否则，您将不得不妥协。

img {
  width: 33%;
  height: 150px;
}

.content {
  width: 33%;
  display:inline-block;
  height:150px;
}

#left {
  background-image: url("https://i.ytimg.com/vi/tYBk4kLHPkk/maxresdefault.jpg");
  background-size:cover;
 
}

#center {
  background-image: url("https://i.pinimg.com/736x/18/f1/a7/18f1a75691c28433c0f1ef502573966b--tv-memes-office-gifs.jpg");
  background-size:cover;
}

#right {
  background-image: url("https://s-media-cache-ak0.pinimg.com/736x/bf/73/19/bf73196327b409d12c214e9994de369e--graduation-caps-grad-cap.jpg");
  background-size:cover;
}

<div class="image-row">
  <div id = "left" class="content">
  </div>
  <div id = "center" class="content"> 
  </div>
  <div id = "right" class="content">
  </div>
</div>