![](/img/trans.png)
[英]Bootstrap - how to make the image being scaled down to fit the window height?
[英]make image fit height of bootstrap 3 grid
在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>
期望的结果:图像的高度从“John Dough”到“Orlando”,宽度应该是成比例的。
一种选择是使用javascript设置img的高度,但是它只能通过CSS完成吗? 桌子会比网格更合适吗?
注意:“John Dough”的内容是未知的,它的最终高度仅在运行时才知道。
您必须为父级设置最大高度:
小提琴 : 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.