Search code examples
csstwitter-bootstraplaravelbootstrap-modal

Resize image inside modal window

I've created a modal for a payments page inside my web application and want to show the branding of the payment provider; Stripe.

By default the image is 1950x927. I can manually change this using style 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.

Desktop:

Stripe image - desktop

Mobile:

Stripe image - mobile

How can I get the image size to load responsively with the modal?

Below is the code on my page:

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

  • Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class.

    For more information you can read here

    Try this:

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