Force height of <div> to match image

问题

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.

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

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

回答1:

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;
}

Check this http://jsfiddle.net/xwJHw/8/

Note: display:table works till IE8 & above.

回答2:

You can use jQuery.

Calculate the hight of the image using $('#imgId').height() and the set the same to Div.

Also see the code, how heights are adjusted here http://filamentgroup.com/examples/equalHeights/

回答3:

EDITED:

@alecrust: This is a fine solution and also implemented in your fiddle, See Here

A pure css solution: 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>

​

​

来源：https://stackoverflow.com/questions/12473744/force-height-of-div-to-match-image