css - 强制 的高度匹配图像

Question

我正在构建一个包含图像和 <div> 的响应式页面并排:

图像的宽度和高度保持其比例并随浏览器窗口扩展/收缩。

<div> 的宽度做同样的事情，但我希望它在高度方面与图像相匹配。

有什么办法可以实现吗？这是问题的 fiddle :http://jsfiddle.net/alecrust/xwJHw/

Answer 1

您可以为此使用display:table 属性。像这样写:

section{
    display:table;
    width:100%;
}
.text-box,.image{
    display:table-cell;
    vertical-align:top;
}

检查这个http://jsfiddle.net/xwJHw/8/

注意:display:table 适用于 IE8 及更高版本。