Search code examples
htmlimagetwitter-bootstrapbootstrap-modal

Image pans out of the modal body when height and width is set

I'm using modal dialog for display single images of photo gallery in my application,

<div class="modal fade" id="example{{$index}}" role="dialog">
   .....
   <div class="modal-body">    
     <img ng-src="../Files/Photos/{{photo_item.link}}" width="565" height="370" />
   </div>
   .....
</div>

enter image description here

Now image has width="565" and height="370" and doesn't exit over border of modal-dialog, but when i change values of width and height attributes :

<div class="modal-body">
   <img ng-src="../Files/Photos/{{photo_item.link}}" width="900" height="700" />
</div>

enter image description here May be somebody knows how i can resolve it, or i can change values just in bootstrap.css file ? Thanks for your answers!

Solution

  • use "img-responsive" class when you want an image that adjust to the width of the containing object.

    If you want image that adjusts to the height then use

    .img-responsive-ht

    {
  display: block;
  width: auto;
  max-height: 100%
}

    note: remove the width and height that you mention in image tag image adjust itself w.r.t container

    Enjoy :)