Javascript Div取另一个Div的高度，即使后者较小

我正在开发一个网页，里面有一个新闻列表，里面有两个div，左边是一张图片，右边是标题、日期和新闻的前30个单词。我希望图像div取文本div的高度，不管图像大小如何。图像通常没有相同的大小/纵横比。我更喜欢避免固定尺寸，因为我希望它能够响应。顺便说一下，我使用的是Bootstrap3.3.7

这是我到目前为止所做的工作的一部分

这是我的HTML

<!-- First News -->
<div class="container-fluid panel panel-default">
  <div class="col-xs-12 col-sm-4 news-img-div">
    <img src="https://fakeimg.pl/412x112/" alt="img_1" class="img-responsive">
  </div>
  <div class="col-xs-12 col-sm-8 news-text-div">
    <h4>News Title 1</h4>
    <p>Nov 6, 2017</p>
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu vehicula turpis. Donec tristique consequat libero a dapibus. Quisque in dolor tellus. Suspendisse auctor in libero non porta. Aliquam eu.</p>
    <a href="" class="btn btn-primary" role="button">See More</a>
  </div>
</div>
<!-- Second News -->
<div class="container-fluid panel panel-default">
  <div class="col-xs-12 col-sm-4  news-img-div">
    <img src="https://fakeimg.pl/350x232/" alt="img_2" class="img-responsive">
  </div>
  <div class="col-xs-12 col-sm-8 news-text-div">
    <h4>News Title 2</h4>
    <p>Nov 5, 2017</p>
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu vehicula turpis. Donec tristique consequat libero a dapibus. Quisque in dolor tellus. Suspendisse auctor in libero non porta. Aliquam eu.</p>
    <a href="" class="btn btn-primary" role="button">See More</a>
  </div>
</div>
<!-- Third News -->
<div class="container-fluid panel panel-default">
  <div class="col-xs-12 col-sm-4 news-img-div">
    <img src="https://fakeimg.pl/243x242/" alt="img_curso" class="img-responsive">
  </div>
  <div class="col-xs-12 col-sm-8 news-text-div">
    <h4>News Title 3</h4>
    <p>Nov 4, 2017</p>
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu vehicula turpis. Donec tristique consequat libero a dapibus. Quisque in dolor tellus. Suspendisse auctor in libero non porta. Aliquam eu.</p>
    <a href="" class="btn btn-primary" role="button">See More</a>
  </div>
</div>

我为div设置了背景色，以便更好地可视化。您可能需要展开“结果”选项卡，以便图像和文本保持在同一行中

---

有没有一种方法可以只使用CSS来完成？否则，我欢迎使用js解决方案。

在包含两个

div

s（具有

容器流体

类）的

div

上，使用

这使得图像

div

与另一个

div

具有相同的高度，即容器的相同高度

以下是代码的修改版本：

编辑 事实证明，上述解决方案不是您想要的

我想要的是图像div始终取文本div的高度

以下是纯JavaScript的解决方案：

功能调整高度（）{
var containers=document.queryselectoral（“.news card”）；
Array.prototype.forEach.call（容器、函数（con）{
var imgDiv=con.getElementsByClassName（“新闻img cont”）[0]；
var textDiv=con.getElementsByClassName（“新闻文本内容”）[0]；
var img=imgDiv.getElementsByClassName（“新闻img”）[0]；
var textDivHeight=textDiv.offsetHeight；
imgDiv.style.height=字符串（textDivHeight）+“px”；
img.style.maxHeight=字符串（textDivHeight）+“px”；
});
}
调整高度（）；
var-sch=假；
addEventListener（“调整大小”，函数（）{
如果（！sch）{
sch=真；
setTimeout（函数（）{
sch=假；
调整高度（）；
}, 500);
}
});
。新闻img cont{
背景色：红色；
}
.新闻文本续{
背景色：浅绿色；
}

新闻标题1
2017年11月6日

Lorem ipsum door sit amet，是一位杰出的领导者。Phasellus eu vehicula turpis。Donec tristique Consequeat libero a dapibus。多洛特卢斯的奎斯克。Suspendisse拍卖行在libero non porta。阿利夸姆欧盟
新闻标题2
2017年11月5日

Lorem ipsum door sit amet，是一位杰出的领导者。Phasellus eu vehicula turpis。Donec tristique Consequeat libero a dapibus。多洛特卢斯的奎斯克。Suspendisse拍卖行在libero non porta。阿利夸姆欧盟
新闻标题3
2017年11月4日

Lorem ipsum door sit amet，是一位杰出的领导者。Phasellus eu vehicula turpis。Donec tristique Consequeat libero a dapibus。多洛特卢斯的奎斯克。Suspendisse拍卖行在libero non porta。阿利夸姆欧盟
在包含两个
div
的
div
上（具有
容器流体
等级），使用

这使得图像
div
与另一个
div
具有相同的高度，即容器的相同高度

以下是代码的修改版本：

编辑
事实证明，上述解决方案不是您想要的

我想要的是图像div始终取文本div的高度

以下是纯JavaScript的解决方案：


功能调整高度（）{
var containers=document.queryselectoral（“.news card”）；
Array.prototype.forEach.call（容器、函数（con）{
var imgDiv=con.getElementsByClassName（“新闻img cont”）[0]；
var textDiv=con.getElementsByClassName（“新闻文本内容”）[0]；
var img=imgDiv.getElementsByClassName（“新闻img”）[0]；
var textDivHeight=textDiv.offsetHeight；
imgDiv.style.height=字符串（textDivHeight）+“px”；
img.style.maxHeight=字符串（textDivHeight）+“px”；
});
}
调整高度（）；
var-sch=假；
addEventListener（“调整大小”，函数（）{
如果（！sch）{
sch=真；
setTimeout（函数（）{
sch=假；
调整高度（）；
}, 500);
}
});
。新闻img cont{
背景色：红色；
}
.新闻文本续{
背景色：浅绿色；
}

新闻标题1
2017年11月6日

Lorem ipsum door sit amet，是一位杰出的领导者。Phasellus eu vehicula turpis。Donec tristique Consequeat libero a dapibus。多洛特卢斯的奎斯克。Suspendisse拍卖行在libero non porta。阿利夸姆欧盟
新闻标题2
2017年11月5日

Lorem ipsum door sit amet，是一位杰出的领导者。Phasellus eu vehicula turpis。Donec tristique Consequeat libero a dapibus。多洛特卢斯的奎斯克。Suspendisse拍卖行在libero non porta。阿利夸姆欧盟
新闻标题3
2017年11月4日

Lorem ipsum door sit amet，是一位杰出的领导者。Phasellus eu vehicula turpis。Donec tristique Consequeat libero a dapibus。多洛特卢斯的奎斯克。Suspendisse拍卖行在libero non porta。阿利夸姆欧盟
我看到你用jQuery标记了这篇文章，所以这里有一个选项供你选择


或者请参阅下面的内容（注意：我相信报告的脚本错误是由引导的跨域脚本寻源引起的，但如果这不准确，有人可以纠正我）


$（“.news img div”）.each（function（）{
var textDivHeight=$（this.parent（）.find（“div.news-text-div”）.height（）；
$（this）.height（textDivHeight）；
var imgHeight=$（this.find（“img.img responsive”）.height（）；
if（imgHeight>textDivHeight）$（this.find（“img.img responsive”）.height（textDivHeight）；
});
。新闻img div{
背景色：红色；
}
.新闻及文字组{
背景-c
.news-img-div {
  background-color: red;
}
.news-text-div {
  background-color:aqua;
}

display: flex;