如何将图像放入引导面板主体答案

【问题标题】：How to fit image into bootstrap panel-body如何将图像放入引导面板主体
【发布时间】：2017-03-25 08:54:55
【问题描述】：

如何将图像放入引导面板主体？我正在使用 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>

谢谢…………

【问题讨论】：

如果您使用的是 img 标签，那么我们无法准确地将 img 适合父级。使用css背景属性
否则只使用 max-height 100%
这解决了您的问题吗？
没有。我尝试了背景属性，但图像没有缩放到面板主体。
我应该使用背景属性作为答案发布吗？

标签： css twitter-bootstrap

【解决方案1】：

你可以使用img-responsive类的bootstrap

<div class="panel-body">
                    <img class="img-responsive" src="resource/Medical_visualization.jpg" class="img-rounded" id="Panel_Image">
                </div>

【讨论】：

【解决方案2】：

试试，

.panel-body{
  height: 100px;
  background-image: url(your-image.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

同时删除 img 标签。根据要求更改高度。

【讨论】：

【解决方案3】：

我建议使用图像作为内嵌背景。我创建了一个 sn-p。请检查

.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>

【讨论】：