web-dev-qa-db-ja.com

モーダルウィンドウ内の画像のサイズを変更する

Webアプリケーション内に支払いページのモーダルを作成し、支払いプロバイダーのブランドを表示したいと思います。縞。

デフォルトでは、画像は1950x927です。 styleを使用してこれを手動で変更できますが、これによって画像サイズが実際に動的になるわけではありません。つまり、デスクトップでは問題なく見えるかもしれませんが、それでもモバイルではモーダルにまで及びます。

デスクトップ：

Stripe image - desktop

モバイル：

Stripe image - mobile

モーダルでレスポンシブにロードする画像サイズを取得するにはどうすればよいですか？

以下は私のページのコードです：

<!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">How can you know your payment is secure?</h4>
      </div>
      <div class="modal-body">
        <img src="{{ asset('img/stripe.png') }}" style="height:250px;">
        <p>Stripe has been audited by a PCI-certified auditor and is certified to <a href="http://www.visa.com/splisting/searchGrsp.do?companyNameCriteria=stripe" target="_blank">PCI Service Provider Level 1</a>. This is the most stringent level of certification available in the payments industry. To accomplish this, they make use of best-in-class security tools and practices to maintain a high level of security at Stripe.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
csstwitter-bootstraplaravelbootstrap-modal
5
James

Bootstrap 3の画像は、.img-sensitiveクラスを追加することで、レスポンシブフレンドリーにすることができます。

詳細については、読むことができます ここ

これを試して：

<img class="img-responsive" src="{{ asset('img/stripe.png') }}" style="max-height:250px;">
13
Jyoti Pathania

次のように、クラス。img-responseを画像に追加するだけです。

<img src="{{ asset('img/stripe.png') }}" class="img-responsive" alt="">

レスポンシブ画像とビデオの詳細については、このページをチェックしてください http://www.tutorialrepublic.com/Twitter-bootstrap-tutorial/bootstrap-images.php

3
Alex

画像タグに最大幅を設定してみてください。

<img src="{{ asset('img/stripe.png') }}" style="height:250px;max-width: 100%;">
2
Rick

<img src="{{ asset('img/stripe.png') }}" style="height:250px; width: 100%;">

width: 100%;を追加すると、画像がdiv内に正しく収まります。

divの幅に応じて高さと幅の比率を変更できるため、ページサイズの変更に非常に役立ちます。

1
Advaith