如何使容器DIV中的所有同级DIV具有相等的高度？

因此，我在一个容器中有2个div。一人向左浮动，一人向右浮动。右边的是文本。左边的是一幅图像。如何设置图像高度，使其等于正确文本的未知高度？

两个div的容器的高度也应与文本div的高度相同。图片的高度不得高于或小于文字。

包含文本的div应该与其中的文本大小一样大。

这是有关JSFiddle的示例

HTML：

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ducimus, excepturi ad! Porro officia, est omnis eum modi reiciendis, velit aliquid dolores tempore odit ipsa temporibus ullam. Adipisci, optio, neque?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure deserunt amet aspernatur nisi, voluptatem consequuntur vel saepe dolorem odio atque, porro architecto alias aliquid. Atque ea soluta, obcaecati sapiente mollitia!

CSS：

.body {
display: table;
background-color: grey;
margin-bottom: 10.38vw;
margin-left: 5.19vw;
margin-right: 5.19vw;
}
.imgContainer {
    float: left;
    position: relative;
    height: 100%;
    width: 40%;
    background-color: green;
}
img {
    height: 100%;
    width: 100%;
    display: block;
    border-radius:100%;
    margin-left: auto;
    margin-right: auto;
}
.text {
    background-color:blue;
    float: right;
    width: 60%;
    font-size: 2.26vw;
    text-align: left;
    display: table-cell;
}

在JSFiddle上，图像的高度似乎比带有文本的div的高度高，但这不是我想要的。我希望将图像缩小到正确的div高度。由于我的容器显示为表格，而子div应该显示为表格单元格，因此该容器的高度应该与文本的高度相同，这正是我的目标。缩小图片后，图片也应在其div中水平居中，但是我当前的代码应允许它正常工作。

另一件事：关键是因为我正在尝试进行响应式设计。调整浏览器窗口大小时，图像应保持与文本相同的高度。

只是为了澄清，我不希望text div的高度扩大到图像的高度；我希望图像的高度缩小到文本的高度。

如果有人有任何建议或解决方案，请告诉我。谢谢！

您可以使用以下方法将父元素.body更改为flexboxdisplay: flex：

.body   {
  display: flex;
}

这样的结果是，您所有的项目都将连续排列，使用内容的大小作为主轴上的大小。如果某些物品比其他物品高，则所有物品都将沿横轴拉伸以填充其全部大小。

检查此JSFiddle或运行下面的代码片段，以获取上述代码的实际示例：

.body   {
  display: flex;
}

.body {
  display: flex;
  background-color: grey;
  margin: 0 auto;
}

.imgContainer {
  background-color: green;
}

img {
  height: 100%;
  width: 100%;
  border-radius: 100%;
}

.text {
  background-color: blue;
  font-size: 14px;
  text-align: left;
}
.text2 {
  background-color: red;
  font-size: 14px;
  text-align: right;
}