Question

我试图设计这是Bootstrap Modal。但是，我没有把它做得很对。

到目前为止，这是我的代码：

<div class="modal fade" id="crowdmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content" style="background: url('satinweave.png')">
      <div class="modal-body" style="background: url( 'picy-modal.png'); background-position: top; background-repeat: no-repeat;">

        <p> cool text... </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-thumbs-up"></i> Got it!</button>
      </div>
    </div>
  </div>
</div>

以下是图片链接：http://i.imgur.com/KP1I8LA.png

如果以某种方式它也可以做出响应，那将是很好的。

任何正确方向的帮助或推动都会有所帮助！

Answer 1

您可以使用常规图片代码而不是使用背景图片来获得所需的结果

＆＃13;

<div class="modal fade" id="crowdmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
    <img src="http://i.imgur.com/KP1I8LA.png" class="img-responsive" style="width:100%;"/>
    <p>
    cool text...
    </p>
      <div class="modal-body" style="background: url( 'http://i.imgur.com/KP1I8LA.png'); background-position: top; background-repeat: no-repeat;">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary btn-sm"><i class="fa fa-thumbs-up"></i> Got it!</button>
      </div>
    </div>
  </div>
</div>

＆＃13;

JsFiddle https://jsfiddle.net/kjarriho/dLw6o6hc/

Answer 2

使用background-size:contain确保background-image占据整个宽度 - 不多也不少。

现在，您可以将padding-top添加到.modal-content，然后就可以了。

<强>演示

＆＃13;

$('#myModal').modal('show');

＆＃13;

.modal-content {
  background:url(http://i.imgur.com/KP1I8LA.png) no-repeat;
  background-size:contain;
  padding-top:40%;
}

.modal-header,.modal-body {
  border:0 !important;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- Modal -->
<div id="myModal" class="modal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <!--<button type="button" class="close" data-dismiss="modal">&times;</button>-->
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save Changes</button>
      </div>
    </div>
  </div>
</div>

＆＃13;

http://jsbin.com/tefufu/edit?html,css,js,output

Answer 3

git tag …

.modal-body{min-height:300px;width:100%;background-size:cover}

试试这段代码。

Answer 4

图片可以在添加类时做出响应 - img-responsive，例如：

<img src="some.png" class="img-responsive" alt="Responsive image">

http://plnkr.co/edit/f6M7Te2AclpznCzlpyjZ?p=preview

希望它有所帮助。

Answer 5

这正是您想要的：请参阅DEMO

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>



    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
       Image
      </button>

      <!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
           <div class="modal-dialog" role="document">
          <div class="modal-content">
          <img src="http://i.imgur.com/KP1I8LA.png" class="img-responsive" />
       
            <div class="modal-body">
            Some cool text
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>

如何在CSS中实现这样的标题图像？

5 个答案: