0

我正在使用 Twitter Bootstrap 3，并且正在使用模式对话框并排显示 2 个 div。左边的 div 包含一个居中的图像，它应该调整到它的容器尺寸，保持纵横比。我的问题如下：如果我垂直调整浏览器窗口的大小，图像高度不会降低到某个值以下并最终超出对话框边界，导致类似这样的结果在此处输入图像描述

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

 <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
    <div class="modal-dialog" style="width: 90%; height: 100%;">
      <div class="modal-content" style="width: 100%; height: 100%; background-color: red;">
        <div class="modal-body" style="width: 100%; height: 100%;">
            <div class="text-center " style="float: left; width: 60%; background-color: #f1f1f1; height: 100%; display: table;">
                <div style="display: table-cell; vertical-align: middle; ">
                    <img class=""src="img/project_image.png" width="100%" style="" />
                </div>
            </div>
            <div style="float: right; width: 40%; background-color: blue;">
                <p>Big Rabbit Illustration</p>
            </div>

        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
4

1 回答 1

0

我想我看到了问题。您的图像没有高度，只有宽度。

<img class=""src="img/project_image.png" width="100%" style="" />

但真正的问题从这里开始。如果您将高度设置为 100%，则图像可能看起来失真。因此，您可能想为图像编写一个 JQuery。比如，当窗口高度这么大时，图像使用height="100%"，当窗口宽度这么大时width="100%"

于 2013-09-04T02:29:32.307 回答