部队高度 匹配图像(Force height of to match image)

我建立一个具有图像和响应页面<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/

注： 显示器：表工作到IE8及以上。

Answer 2:

你可以使用jQuery。

计算使用$图像（“＃imgId”）的HIGHT。高度（）和设定相同，以事业部。

还看到代码，高度是怎么会在这里调整http://filamentgroup.com/examples/equalHeights/

Answer 3:

编辑：

@alecrust：这是一个很好的解决方案，并在你的小提琴也实现， 在这里看到

纯的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>

文章来源: Force height of

to match image