twitter-bootstrap 使图像适合 bootstrap 3 网格的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23388985/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
make image fit height of bootstrap 3 grid
提问by Marius
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)
在 bootstrap 3 网格中，其中一列包含图像。如何使它成为另一列的 100% 高度？(最大高度)
img-responsive will fit the width, but not the height. Here's a fiddle: http://jsfiddle.net/mariusandreiana/V2Hy6/17/
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>
Desired result: image's height is from "John Dough" to "Orlando", and the width should be proportional.
期望的结果：图像的高度从“John Dough”到“Orlando”，宽度应该成比例。
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?
一种选择是使用 javascript 来设置 img 的高度，但只能通过 CSS 来完成吗？桌子会比网格更适合吗？
Note: the "John Dough"'s contents are unknown, it's final height is known only at runtime.
注意：“John Dough”的内容是未知的，它的最终高度只有在运行时才知道。
回答by BENARD Patrick
You have to set a max-height to the parent :
您必须为 parent 设置一个 max-height ：
Fiddle: http://jsfiddle.net/V2Hy6/19/
小提琴：http: //jsfiddle.net/V2Hy6/19/
CSS:
CSS:
.bg {
background-color: #FFAAAA;
height:100%;
}
.img-container{
height:100%;
max-height:200px;
}
img{
height:100% !important;
}
HTML:
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>
