How to fit my image in thumbnail?

How to fit my image in thumbnail?
0.0 0

#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>

#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.


#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%;
}

#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.