How to fit my image in thumbnail?

1


Above is the link to my freecode camp first project.As you can see in thumbnail there is lot of white space in left and right.I want to reduce that.

2

You can add style="width:100%;" to your img html element.

Check this out for more info: http://www.w3schools.com/TAgs/att_img_width.asp

3

is there any bootstrap class for that

4

There is; you can use class="img-responsive"

5

Thanks! Your previous solution is working very well.But your second soln class=“img-responsive” is not working.

6

In future if you find any bootstrap solution regarding this problem than please inform me.Thanks in advance!

7

You can try containing the thumbnail in an offset column, like

<div class="col-md-6 col-md-offset-3">
  <div class="thumbnail">
    <!-- ... -->
  </div>
</div>
1 Like
8

img-responsive is working fine for me in Chrome, but apparently not in Firefox… perhaps it’s a browser issue on your end.

Either way, I think width:100% should serve your needs fine.

1 Like
9

I inspected .img-responsive in Bootstrap’s CSS and found that it doesn’t touch width, but sets max-width to 100%.

10

@kevcomedia You can always overwrite the .img-responsive bootstrap’s class.

.img-responsive {
    width: 100%;
}
2 Likes
11

This worked but as expected it drastically reduced size of image.But this was good logical soln

12

You’re right. col-md-6 is too small. I played around and found that you can go as far as col-md-10 col-md-offset-1 without the extra space showing up.

2 Likes