css - 使图像适合 bootstrap 3 网格的高度

Question

在 bootstrap 3 网格中，其中一列包含图像。如何使它成为另一列的 100% 高度？ (最大高度)

img-responsive 会适应宽度，但不会适应高度。这是一个 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>

期望的结果:图像的高度从“John Dough”到“Orlando”，宽度应该成比例。

一种选择是使用 javascript 来设置 img 的高度，但只能通过 CSS 来完成吗？表格会比网格更合适吗？

注意:“John Dough”的内容是未知的，它的最终高度只有在运行时才知道。

Answer 1

你必须给父级设置一个最大高度:

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>