如何使 Bootstrap img-responsive 保持在其父 div 的边界内

Question

使用 Bootstrap 3，我试图使图像保持在其父 div 的边界内。 这适用于宽度，但无论我尝试什么，图像总是从父 div 的底部掉出来，因为当我降低浏览器高度时它的高度不会更新。有可能完成这项工作吗？如果是这样，如何？谢谢。

JSFiddle : http://jsfiddle.net/rensdenobel/9486t/

HTML：

<div class="container">
    <div class="row">
        <div class="col-sm-3 col-md-3 col-lg-4"></div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 center">
            <div class="content">
                <div id="text">You chose this photo :</div>            
                <div id="thumbnail-container">
                    <img id="thumbnail-image" class="img-responsive" src="http://placehold.it/800x800" />
                </div>
                <div id="button-share">
                        <button class="btn btn-success">Share it !</button>
                </div>        
            </div>
        </div>
        <div class="col-sm-3 col-md-3 col-lg-4"></div>        
    <div>
</div>

CSS：

html, body {
    height:100%;
}

.container {
    height:100%;
    width:100%;
    border:1px solid blue;
}

.row {
    border:1px solid green;
    height:100%;
}

.center {
    display:table;
    border:1px solid red;
    padding-top:12px;
    padding-bottom:12px;
    text-align:center;
    height:100%;
    max-height:100%;
}

.content {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    height:auto;
    border:1px solid green;
}

#thumbnail-image {
    margin-left:auto;
    margin-right:auto;
    height:auto;
}

#thumbnail-container{
    width:100%;   
    border:1px solid pink;
    max-height:70%;
    height:70%;
    margin-top:12px;
    margin-bottom:12px;    
 }

Answer 1

试试

<div id="thumbnail-container col-sm-4 col-xs-4">
   <img id="thumbnail-image" class="img-responsive" src="http://placehold.it/800x800" />
 </div>

更改 col-sm-* 和 col-xs-* 以获得所需的输出

Answer 2

这种方法对我有用。请尝试将此添加到您的 CSS：

.container {
     height:max-content;
}