CODEWITHSUNDEEP
htmlimagetwitter-bootstrapbootstrap-modal
Uladz Kha
Uladz Kha

Reputation: 2354

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!

Upvotes: 2

Views: 5144

Answers (4)

Chandni Soni
Chandni Soni

Reputation: 387

To resolve this issue add bootstrap's img-fluid class and remove other attributes of width and height.

So the code will look like this,

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

Upvotes: 0

Prince Sodhi
Prince Sodhi

Reputation: 2955

Remove the width and height and set it to 100% (both). Then image will stay inside modal box.

have fun.

Upvotes: 2

Jyoti Pathania
Jyoti Pathania

Reputation: 4989

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 :)

Upvotes: 3

Eduard Braun
Eduard Braun

Reputation: 378

Not sure if that is what you are looking for, but if you want the modal to be larger you could use: 

<div class="modal modal-lg">
     <div class="modal-content">
          <div class="modal-body">
             <img ng-src="../Files/Photos/{{photo_item.link}}"/>   
          </div> 
     </div>
</div>

Upvotes: 1

Related Questions