Question

到目前为止我有这个：codepen

HTML：

<a data-toggle="modal" href="#tallModal" class="btn btn-primary">Wide, Tall Content</a>


<div id="tallModal" class="modal modal-wide fade">   <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <img src="http://i.imgur.com/ikqKRG4.jpg">
      </div>
    </div>
    <!-- /.modal-content -->   </div>   <!-- /.modal-dialog --> </div> <!-- /.modal -->

的CSS：

.modal-dialog {
  height: 100%;
  width: 200px;
  max-width: 100%;
  margin: 0px auto;
  overflow-y: auto;
}

@media (min-width: 768px) .modal-dialog {
  margin: 0px auto;
}

.modal-body {
  padding: 0;
}

我希望模态水平和垂直溢出。但是，我有一些问题，滚动条覆盖图像 - 因此我需要将宽度设置为图像的宽度+滚动条的宽度。我该如何避免这种情况？

我不希望图像缩放，因此它必须位于带溢出的div中，我还希望模态的宽度为图像本身的宽度，而不必指定图像的宽度。

Answer 1

放入img-responsive类

 <a data-toggle="modal" href="#tallModal" class="btn btn-primary">Wide, Tall Content</a>


<div id="tallModal" class="modal modal-wide fade">   <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <img src="http://i.imgur.com/ikqKRG4.jpg" class="img-responsive">
      </div>
    </div>

设置宽度和高度，如您所愿。

Answer 2

如果这个小小的css hack适合你，请告诉我：

.modal-body {
    max-height: calc(100vh - 210px);
    overflow: auto;
}

这是您自己的CodePen的一个分支：https://codepen.io/geardoom3/pen/KvXdvY

带有溢出内部bootstrap模态的图像

2 个答案: