title: Resize image inside modal window
body: <p>I've created a modal for a payments page inside my web application and want to show the branding of the payment provider; Stripe.</p>
  
  <p>By default the image is 1950x927. I can manually change this using <code>style</code> however this doesn't make the image size truly dynamic; i.e it might look fine on desktop but still extends over the modal on mobile.</p>
  
  <p>Desktop:</p>
  
  <p><a href="https://i.stack.imgur.com/6TwtR.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6TwtR.png" alt="Stripe image - desktop"></a></p>
  
  <p>Mobile:</p>
  
  <p><a href="https://i.stack.imgur.com/g8SeW.png" rel="noreferrer"><img src="https://i.stack.imgur.com/g8SeW.png" alt="Stripe image - mobile"></a></p>
  
  <p>How can I get the image size to load responsively with the modal?</p>
  
  <p>Below is the code on my page:</p>
  
  <pre><code>&lt;!-- Modal content--&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 class="modal-title"&gt;How can you know your payment is secure?&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;img src="{{ asset('img/stripe.png') }}" style="height:250px;"&gt;
          &lt;p&gt;Stripe has been audited by a PCI-certified auditor and is certified to &lt;a href="http://www.visa.com/splisting/searchGrsp.do?companyNameCriteria=stripe" target="_blank"&gt;PCI Service Provider Level 1&lt;/a&gt;. 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.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>