如何将图像放入bootstrap panel-body

wixjitnu 于 2023-03-27 发布在 Bootstrap

关注(0)|答案(4)|浏览(126)

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

谢谢......

twitter-bootstrap

来源：https://stackoverflow.com/questions/43014433/how-to-fit-image-into-bootstrap-panel-body

4条答案

按热度按时间

rdrgkggo1#

可以使用bootstrap的img响应类

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

赞(0）回复(0）举报 2023-03-27

3wabscal2#

试试看，

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

也删除img标签。改变高度按要求。

赞(0）回复(0）举报 2023-03-27

jbose2ul3#

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

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

赞(0）回复(0）举报 2023-03-27

dgiusagp4#

将图像移动到面板主体上方标题之前。

<div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">The Title</div>
        </div>
        <img src="" width="100%" />
        <div class="panel-body">
              ...
        </div>
        <div class="panel-footer">
            ...
        </div>
    </div>

赞(0）回复(0）举报 2023-03-27

我来回答

如何将图像放入bootstrap panel-body

4条答案

相关问题

热门标签

最新问答