css - 受力高度匹配图像

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 及以上。

Answer 2

您可以使用 jQuery。

使用 $('#imgId').height() 计算图像的高度，并将其设置为 Div。

另请参阅代码，此处如何调整高度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>

​</p>

​</p>