Bootstrap 模态中的图像问题

Posted 2023-03-06

【中文标题】Bootstrap 模态中的图像问题

【英文标题】：Issues with image inside Bootstrap modal

【发布时间】：2016-04-22 20:46:00

【问题描述】：

http://codepen.io/anon/pen/jWGXKJ

<a data-toggle="modal" href="#modal" class="btn btn-primary">Open</a>
<div id="modal" 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/aZO5Kol.jpg"/>
      </div>
    </div>
  </div>
</div>

如何让模态框扩展其宽度以适合其包含的图像，而无需计算和使用以像素为单位的图像宽度。 当模式水平延伸到当前视图之外时，如何在窗口本身上获得水平滚动条？

【参考方案1】：

1) 不需要像素 你可以用百分比来做到这一点 %

img
width:100%;

【讨论】：

呃... 如何让modal to expand its width 适合其包含的图像。不是我猜的图像。 :)

不过，答案对我有所帮助，因为我想将图像缩小到模态框的大小...... :)

【参考方案2】：

对于您的所有问题，RTFM:

如何让模态框扩大其宽度以适合其包含的图像，而无需计算和使用以像素为单位的图像宽度。

班级.modal-dialog。它有一个默认的width 600px。这样做：

.modal 
  text-align: center;       /* Center the modal window. */


.modal-dialog 
  width: auto;
  margin: 30px auto;
  display: inline-block;

当模态框水平延伸超出当前视图时，如何获得水平滚动条？

这将确保，如果内容超出模式窗口范围，它将显示滚动条。

.modal-dialog 
  overflow: auto;

【讨论】：

第一部分效果很好，但我如何为窗口本身获得滚动条 - 考虑一个非常宽的图像：codepen.io/anon/pen/PZJLdW

@GaryIn 抱歉参加了会议...所以，给modal-full 让它为你工作？

@GaryIn 检查第二个。我仔细检查了。

仍然对我不起作用。你可以尝试发布一个codepen吗？我还注意到它为早期的引导版本默认提供了一个水平窗口滚动条。

另外尝试添加overflow-x:auto;获得水平滚动条。