How to adjust images to fit a div in Bootstrap?

Question

I am trying to fit images in div. However, the 3rd Image is quite big in height and appears to be big as compared to other Images. I have tried giving height and width to the 3rd Image but the results are not best looking. Is there any solution to fit the image and make it responsive in same way as other two do? Here is my Code:

Here is the Output

show your code not image – לבני מלכה Jul 01 '18 at 08:24 — לבני מלכה, Jul 01 '18 at 08:24

score 0 · Answer 1 · answered Jul 01 '18 at 08:13

Since you are using Bootstrap 3, you need to add:

.img-responsive

class to your image... Something like this:

<img class="img-responsive" src="your image">

.img-responsive (Bootstrap 3) is equivalent to .img-fluid in Bootstrap 4.

It will give max-width of 100% to your image, and it will set height to auto - exactly what you want with your image.

How to adjust images to fit a div in Bootstrap?

1 Answers1