与内部响应图像相同高度的列[重复]答案

【问题标题】：Column of same height with responsive image inside [duplicate]与内部响应图像相同高度的列[重复]
【发布时间】：2016-03-03 23:25:12
【问题描述】：

我正在开发一个网站，我的大部分页面都有这样的结构：

<div class="row">
 <div class="col-1-2">
  <img>
 </div>
 <div class="col-2-2">
  <p>Text</p>
 </div>
</div>

我希望第一列的图像与第二列中的文本高度相同。

有人知道我该怎么做吗？

提前致谢；）

P.S : 抱歉英语不好

【问题讨论】：

我想您正在使用某种 CSS 框架、Bootstrap 或 Foundation ？看看这些：Bootstrap equal height columns、Foundation equal height columns、Fluid width equal height columns
不，我用过这个网站：responsivegridsystem.com/calculator
看看这个然后stackoverflow.com/questions/2114757/css-equal-height-columns
谢谢 muhammet，flex 解决方案运行良好。我现在的问题是我希望图像占据列的所有高度。你知道怎么做吗？
不客气！尝试将align-items: stretch; 添加到img。

【解决方案1】：

您必须将图像容器设置为绝对值，将行设置为相对值，然后将列容器的宽度设置为 50%，高度设置为 100%。 img 应该具有 max-width: 100% 作为 css 属性

【讨论】：