CSS - 与背景图像等高流体宽度div答案

【问题标题】：CSS - Equal height fluid width divs with background imageCSS - 与背景图像等高流体宽度div
【发布时间】：2015-08-02 09:34:16
【问题描述】：

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

我需要图像在顶部和底部与文本框的末尾齐平。容器元素具有响应性。

想要的效果

目前我所拥有的是使用浮动将元素排列在一起并响应良好，但图像不足，如下所示：

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

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

但这仍然有点不足，除非我调整底部填充量。当我随着纵横比的变化而重新调整浏览器的大小时，这将变得无用。

我试图避免使用 Javascript 来解决这个问题。

【问题讨论】：

标签： html css

【解决方案1】：

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

【讨论】：