Resize image inside modal window

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

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

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

<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

Related