私は 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 -->