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 に答える