引导模式内溢出的图像答案

【问题标题】：Image with overflow inside bootstrap modal引导模式内溢出的图像
【发布时间】：2016-04-22 17:06:47
【问题描述】：

到目前为止我有这个：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 中，我还希望模态的宽度是图像本身的宽度，而不必指定图像的宽度。

【问题讨论】：

将img-responsive类放入img标签中..
检查这个问题的答案会帮助你stackoverflow.com/questions/16152275/…
@Gray In。通过一些屏幕截图显示一些预期的结果。
@varum 很好，它与我所拥有的非常相似，但不必指定宽度 + 滚动条宽度。除非需要，否则我不想使用水平滚动条。

标签： html css twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

让我知道这个小 CSS hack 是否适合你：

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

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

【讨论】：

【解决方案2】：

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

根据需要设置宽度和高度。

【讨论】：