CODEWITHSUNDEEP
csstwitter-bootstraplaravelbootstrap-modal
James
James

Reputation: 16339

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>

Upvotes: 10

Views: 34582

Answers (6)

Rahul Bhalekar
Rahul Bhalekar

Reputation: 41

<img src="~/images/coming-soon.svg" height="310px" class="img-fluid" />

Upvotes: 0

NSR
NSR

Reputation: 121

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') }}" >

Upvotes: 9

Advaith
Advaith

Reputation: 2580

<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

Upvotes: 3

Jyoti Pathania
Jyoti Pathania

Reputation: 4989

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

Upvotes: 17

Alex
Alex

Reputation: 996

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

Upvotes: 5

Rick
Rick

Reputation: 452

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

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

Upvotes: 2

Related Questions