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

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

2 个答案: