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

Question

ウェブアプリケーション内の支払いページのモーダルを作成し、支払いプロバイダのブランドを表示したい。ストライプ。

デフォルトでは、画像は1950x927です。私はstyleを使ってこれを手動で変更することができますが、これは画像サイズを真にダイナミックにしません。デスクトップ上では正常に表示されますが、モバイル上のモーダルには引き続き適用されます。

デスクトップ：

モバイル：

がどのように画像サイズがモーダルに応じてロードするために得ることができますか？あなたは、画像タグに最大幅を設定しようとすることができます

<!-- 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> 

Answer 1

イメージは.imgの応答性クラスの追加 を経由して応答フレンドリー行うことができます。詳細については

あなたはこの試しくださいhere

を読むことができます：

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

：同じように、自分のイメージにクラス.imgの応答性を追加

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

Answer 2

：

は、以下の私のページのコードです。ブートストラップ3で

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

Answer 3

をレスポンシブな画像とビデオの詳細については、このページをチェックしてください - を追加

Answer 4

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

が正しくdiv内部のあなたのイメージに合います。

それはdiv