力高< div>匹配图像 [英] Force height of <div> to match image

问题描述

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

I'm building a responsive page that has an image and <div> side by side:

图像的宽度和高度保持不变，并随浏览器窗口扩展/收缩.

The width and height of the image retain their proportions and expand/contract with the browser window.

< div> 的宽度相同，但是我希望它与图像高度匹配.

The width of the <div> does the same, but I'd like it to match the image in terms of height.

有什么办法可以做到这一点?这是问题的提琴手: http://jsfiddle.net/alecrust/xwJHw/

Is there any way of achieving this? Here's a Fiddle of the problem: http://jsfiddle.net/alecrust/xwJHw/

推荐答案

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

You can use display:table property for this. Write like this:

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

选中此 http://jsfiddle.net/xwJHw/8/

注意: display:table 可以一直使用到IE8&以上.

Note: display:table works till IE8 & above.

这篇关于力高< div>匹配图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！