twitter-bootstrap 如何将图像放入引导面板主体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43014433/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fit image into bootstrap panel-body
提问by ANMo
How to fit image into bootstrap panel-body? I am using img tag. I tried to do max-height:100% and max-width: 100% but no luck. Is there any way to fit image to panel-body without specifying actual height and width. following is my code:
如何将图像放入引导面板主体？我正在使用 img 标签。我试着做 max-height:100% 和 max-width: 100% 但没有运气。有什么方法可以在不指定实际高度和宽度的情况下使图像适合面板主体。以下是我的代码：
<div class="jumbotron">
<div class="container" id="project_info">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">Medical Data Visualization</div>
<div class="panel-body">
<img src="resource/Medical_visualization.jpg" class="img-rounded" id="Panel_Image">
</div>
</div>
</div>
</div>
</div>
</div>
Thanks.........
谢谢.........
回答by Aravind
You can use the img-responsive class of bootstrap
您可以使用引导程序的 img-responsive 类
<div class="panel-body">
<img class="img-responsive" src="resource/Medical_visualization.jpg" class="img-rounded" id="Panel_Image">
</div>
回答by LIJIN SAMUEL
Try,
尝试，
.panel-body{
height: 100px;
background-image: url(your-image.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
also remove img tag. change the height as per req.
也删除 img 标签。根据要求更改高度。
回答by Lucian
i recommend using image as inline background. I have created a snippet. please check
我建议使用图像作为内嵌背景。我创建了一个片段。请检查
.panel-body {position: relative}
.panel-body .image-holder {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div class="container" id="project_info">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">Medical Data Visualization</div>
<div class="panel-body">
<div class="image-holder" style="background: url(http://weknowyourdreams.com/images/nature/nature-02.jpg)"></div>
</div>
</div>
</div>
</div>
</div>
</div>