Css 如何使Bootstrap img响应性保持在it范围内'；s父分区

使用Bootstrap3，我试图使一个映像保持在其父div的边界内。 这对于宽度来说效果很好，但不管我怎么做，图像总是从父div的底部掉下来，因为当我降低浏览器高度时，它的高度不会更新。有可能做到这一点吗？如果是，怎么做？谢谢

JSFiddle：

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>

试一试

---

更改

列sm-*

和

列xs-*

以获得所需的输出

这种方法对我很有效。请尝试将此添加到css中：

.container {
     height:max-content;
}    

---

谢谢似乎不起作用，试一试：你用什么浏览器？当我调整屏幕大小，使其高度小于图像时，图像会落在屏幕上。我使用firefox，你是否在使用IE？firefox和ChromeFor中的相同结果适用于新读者：讨论的结果是，使用建议的解决方案，高度保持不变。到目前为止，这个问题还没有解决方案。当我移除这个表时，它就工作了

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

.container {
     height:max-content;
}