How to make Bootstrap img responsive staying within its parent div

With Bootstrap 3, I am trying to make an image within its parent div. This works fine for width, but no matter what I try, the image continues to fall out of the bottom of the parent div, because the height does not update as the browser height decreases. Can this work be done? If so, how? Thank.

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;    
 }