html - CSS - 具有背景图像的等高流体宽度 div

Question

我需要并排放置 2 个等宽的 div，左列包含一个图像，右列将包含动态文本，其中文本 div 的高度可以在 400px - 550px 之间变化，具体取决于站点的文本量所有者输入。

我需要图像在顶部和底部与文本框的末尾对齐。容器元素是流动的以响应。

期望的效果

我现在所拥有的是使用 float 将元素排列在一起并响应良好，但图像不够好，如下所示:

我尝试将图像设置为左栏中的背景图像...

.column-image{
    padding-bottom:100%;
    margin-bottom:-100%;
    background-size:contain;
}

但是除非我调整填充底部的数量，否则这仍然有点不足。当我随着宽高比的变化调整浏览器大小时，这将变得毫无用处。

我尽量避免使用 Javascript 来解决这个问题。

Answer 1

对容器使用display:table，对内部div 使用display:table-cell。还要确保删除 float

fiddle :http://jsfiddle.net/afelixj/26b3vtfx/2/