强制<div>的高度匹配图像</div>

Question

我正在构建一个响应式页面，其中包含一个图像<div>并排：

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

<div>的宽度相同，但我希望它与高度相匹配。

有没有办法实现这个目标？这是问题的小提琴：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＆amp;上方。

Answer 2

您可以使用jQuery。

使用$（'＃imgId'）。height（）计算图像的高度，并将其设置为Div。

另请参阅代码，如何调整高度http://filamentgroup.com/examples/equalHeights/

Answer 3

编辑：

@alecrust：这是一个很好的解决方案，也可以在你的小提琴中实现，See Here

纯css解决方案：SEE DEMO

<强> CSS：

#wrapper {
    overflow: hidden;
    background: #ccc;
}

.placeholder_image {
    float: left;
    width: 430px;
    height: 264px;
    background: #fff;
    padding: 0 20px 0 0;   
}

.placeholder_text {
    background: #ccc;
    margin-left: 450px;
    display: block;
}

<强> HTML：

<div id="wrapper">
    <div class="placeholder_image">
        <img src="http://www.qesign.com/templates/designs/christmas-after-effects-animated-e-card-template-31966.jpg" alt="" />
    </div>

    <div class="placeholder_text">
        A block of text
    </div>
</div>