Images won't fit in Bootstrap Thumbnail

After wrapping images in a thumbnail, the images overflowed the thumbnails. I don’t know why. I use Bootstrap.
The images also come in different sizes and I want them all to take just one size and fit in the thumbnail.

here’s the sample code:
<div class="col-lg-4"> <div class="img-thumbnail"> <img src="https://images.unsplash.com/photo-1547231242-2d9033c5d8b5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60"> </div> </div>

here’s the screenshot of what I’m talking about.

Move the img-thumbnail class to the images.

You can also give the images the img-fluid class but then the thumbnails will then be too wide (100%) on the widths below the col-lg-4 breakpoint (min-width: 992px).

Just tell me what you’re trying to do and I’ll type up the code for it. I hate bootstrap…

Are you wanting always 3 images across? Are you wanting mobile responsive? What’s the max number of images you want across? What’s the largest you want the image to be?

I don’t understand this. Please can you show a sample code of what you mean?

I wish to use bootstrap. I just want those images to fit in the thumbnails.

Like this.

If you have images of different dimensions you have to do some manual adjustments.

Can you add your code to jsfiddle.net?