Question

如何将图像融入自举面板体？我正在使用img标签。我试着做最大高度：100％和最大宽度：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>

感谢.........

Answer 1

您可以使用img-responsive类的bootstrap

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

Answer 2

尝试，

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

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

Answer 3

我建议使用图像作为内联背景。我创建了一个片段。请检查

＆＃13;

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

＆＃13;

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

＆＃13;

如何将图像放入bootstrap panel-body中

3 个答案: