Resize image inside modal window

Question

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:

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 1

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;">

Solution 2

Images in Bootstrap can be made responsive by just adding a class to img tag.

For Bootstrap 3: Use .img-responsive

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

For Bootstrap 4: Use img-fluid as the img-responsive doesn't exist anymore in v4.

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

Solution 3

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

Adding width: 100%; fits your image inside the div correctly.

It is very useful in page size change as it keep the ratio between height and width changed according to the width of div

Solution 4

Just add the class .img-responsive to your image, like:

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

Checkout this page to learn more about responsive images and video - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-images.php

Solution 5

You can try to set a max width on the image tag.

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

View more solutions

Comments

[James]

Works a charm! Thanks! I searched high and low for a solution, and couldn't find anything from the searches I ran.

[James]

This works too. I didn't even realise Bootstrap had an img-responsive class. I like this approach as it doesn't involve manually setting style.

[CarlosZ]

It works as well for Bootstrap 4 with class="img-fluid"

[kapitan]

img-fluid does the trick for me. [+1]