aceminer aceminer - 4 years ago 117
Javascript Question

Automatically resize an image to fit in a container

How do I automatically resize an image to fit it into a container? I would like to have a blank background for the container. Currently it is like this:

<div class="row">
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<img src ="haha.png"/>
</div>
</div>
</div>
</div>
</div>


I would like to have a container where I could fit the image inside, automatically resizing the image.

enter image description here

Answer Source

Try to add class "img-responsive" to your image tag.

<img class="img-responsive" src ="haha.png" alt = "Alternative Text" />

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

http://getbootstrap.com/css/#images

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download