使图像适合自举3格的高度

Question

In a bootstrap 3 grid, one of the columns contains an image. How can one make it 100% height of another column? (with biggest height)

img-responsive will fit the width, but not the height. Here's a fiddle: http://jsfiddle.net/mariusandreiana/V2Hy6/17/

<div class="container">
    <div>some content</div>    
    <div class="row bg">
        <div class="col-xs-1">Text</div>
        <div class="col-xs-6">
            <p>
                <h1>John Dough</h1>
                1155 Saint. St. #33
                <br/>Orlando, FL 32765</p>
        </div>
        <div class="col-xs-5">
            <img class="img-responsive" src="https://c402277.ssl.cf1.rackcdn.com/photos/2842/images/hero_small/shutterstock_12730534.jpg?1352150501">
        </div>
    </div>
    <div>more content</div>
</div>

Desired result: image's height is from "John Dough" to "Orlando", and the width should be proportional.

One option would be to use javascript to set img's height, but can it be done only via CSS? Would a table be a better fit than the grid?

Note: the "John Dough"'s contents are unknown, it's final height is known only at runtime.

Answer 1

You have to set a max-height to the parent :

Fiddle : http://jsfiddle.net/V2Hy6/19/

CSS :

.bg {
    background-color: #FFAAAA;
    height:100%;
}

.img-container{
    height:100%;
    max-height:200px;
}

img{
    height:100% !important;
}

HTML :

<div class="container">
    <div>some content</div>    
    <div class="row bg">
        <div class="col-xs-1">Text</div>
        <div class="col-xs-6">
            <p>
                <h1>John Dough</h1>
                1155 Saint. St. #33
                <br/>Orlando, FL 32765</p>
        </div>
        <div class="col-xs-5 img-container">
            <img class="img-responsive" src="https://c402277.ssl.cf1.rackcdn.com/photos/2842/images/hero_small/shutterstock_12730534.jpg?1352150501">
        </div>
    </div>
    <div>more content</div>
</div>