我想并排制作2个响应式div，同时保持它们的高度相同。其中一个是图像，另一个是文本。如何在不使用JavaScript的情况下确保图像高度相等。我的图片尺寸为1000×1799。
body {
font-family: arial;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
#text {
width: 50%;
text-align: left;
}
#image img {
width: 50%;
}
.box {
display: flex;
flex-direction: row;
}<div class="container">
<div class="box">
<div id="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="image">
<img src="lfc.png">
</div>
</div>
</div>发生的事情是，如果试图使高度百分比，那么它将明显改变以适应当前的屏幕设置，但我想使其响应和相同的高度。
提前致谢！
你的两列实际上已经是相同的高度;你只是不允许你的图像扩展来填充容器的height。为此，只需在width: 100%上设置height: 100%和#image img即可。请注意，这样做会使图像宽高比偏斜。如果你想保持这个比例，你需要指定width: auto，虽然这会在没有空间显示所有内容时切掉部分图像。
请注意，您还需要在width上使用50%的#image，以便文本容器和图像容器占据width的一半。
另请注意，由于文本的性质占据不同宽度的不同行数，因此图像的高度始终不同。但是，容器的高度始终相同。我已经在容器中添加了一个背景来演示这个。
这可以在下面看到。
body {
font-family: arial;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
#text {
width: 50%;
text-align: left;
background: cyan;
}
#image {
width: 50%;
}
#image img {
width: 100%;
height: 100%;
}
.box {
display: flex;
flex-direction: row;
}<body>
<div class="container">
<div class="box">
<div id="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="image">
<img src="http://placehold.it/100">
</div>
</div>
</div>
</body>您可以使用flexbox：
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
padding: 1em;
border: solid;
}
<div class="row">
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="col"><img src="lfc.png"></div>
</div>