在固定宽度的一排不同尺寸的多个图像中，并调节高度

Question

考虑3（或更多）图像，所有不同尺寸和宽度比的固定宽度（例如width:100%）：

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

如何强制所有图像具有相同的高度及其总宽度以填充容器的宽度（即如何制作整齐的图像）？

我尝试了flex或inline-block或现在的各种组合来与height:100%或Object-Fit正确使用，但似乎无效。我要么松开纵横比，切割图像的一部分，要么没有相等的高度。

在"英语伪代码"中，该过程听起来很简单 - 分别分别重新分组为单位高度，然后将作为一个给定宽度的组重新恢复，同时保持长宽比。CSS是否有一个特定的步骤？

Answer 1

我认为将图像设置为背景图像可能会有所帮助。这样，您可以使用background-size:cover拥有不同尺寸填充的不同尺寸填充图像。我不认为如果每个图像的长宽比不同，则可以使所有图像都具有相同的高度，而不会切断零件。您也可以尝试调整每个图像的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>