Question

在bootstrap 3网格中，其中一列包含图像。如何才能使另一列的高度达到100％？（最高身高）

img-responsive将适合宽度，但不适合高度。这是一个小提琴：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>

期望的结果：图像的高度来自＆＃34; John Dough＆＃34;到＆＃34;奥兰多＆＃34;，宽度应该是成比例的。

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

注意：＆＃34; John Dough＆＃34;的内容是未知的，它的最终高度仅在运行时才知道。

Answer 1

您必须为父级设置最大高度：

小提琴：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>

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

1 个答案: