Twitter Bootstrap 3 modal: image not resizing vertically

Twitter Bootstrap 3 modal: image not resizing vertically

I'm working with Twitter Bootstrap 3 and I'm using a modal dialog to
display 2 divs side by side. The left div contains a centered image which
should adjust to its container dimensions, keeping the aspect ratio. My
issue is the following: if I resize the browser window vertically the
image height doesn't decrease bellow a certain value and eventually gets
outside the dialog boundaries, resulting in something like this
This is the code I've reached so far:
<!-- 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 -->