James James - 1 year ago 119
CSS Question

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

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.


Stripe image - desktop


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 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 class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

Answer Source

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;">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download