Twitter Bootstrap 3模态：图像不垂直调整大小

Question

我正在使用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 -->

Answer 1

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

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

但真正的问题从这里开始。如果您将高度设置为100％，图像可能看起来变形。 所以你可能想为图像编写一个JQuery。有点像，当窗口高度很大时，图像使用height="100%"，当窗口宽度很大时使用width="100%"