Html CSS-如何在父div不'；我没有固定的高度。（无弹性）

我有两张不同尺寸的图片。我希望它们水平对齐并填充相同的高度

HTML

<div class="background">
  <div class="wrapper">
    <div class="content">
      <img src="./nat-8.jpg" alt="" />
      <img src="./nat-9.jpg" alt="" />
    </div>
  </div>
</div>

我得到的结果是：

如您所见，第一张图片的顶部留有空白。如何使每张图片都覆盖父级的整个高度，而不在父级上设置固定高度

注意：我知道可以通过在content div上设置“display:flex”来使用flex完成。但是，如果没有flexbox，我该怎么做呢？

---

我在图像上尝试了“display:table cell”，在一个解决方案中，我发现它用于使div填充其父元素的全部八个，但显然它在“img”元素上不起作用。

您需要设置父容器的高度，然后可以将图像的高度设置为100%以填充空间

然后可以使用

对象拟合：覆盖

来保持图像比例，而不是拉伸。您还可以使用

对象位置：居中

来保持定位也居中

并非所有浏览器都与object fit兼容，因此我建议用背景图像集将图像替换为div

.background{
高度：100vh；
宽度：100%；
背景颜色：灰色；
位置：相对位置；
}
.包装纸{
身高：100%；
}
.内容{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：80%；
背景色：白色；
身高：100%；
最大高度：150像素；
}
img{
显示：内联块；
宽度：35%；
身高：100%；
对象匹配：覆盖；
对象位置：中心；
}

你至少可以假设第一幅图像的高度一定要小一些吗？@意大利不，我希望它能正常工作。尝试不要在img上使用设置的宽度，而是使用100%的高度，而不是设置

内容的高度。

？@dantheman93我刚刚尝试过，它给出了相同的结果。

.background {
  height: 100vh;
  width: 100%;
  background-color: grey;
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  background-color: white;
}

img {
  display: inline-block;
  width: 35%;
}