Adjusting and image size to fit a div with Bootstrap - html

Question

I'm trying to get an image to fit within a specific size div. Unfortunately, the image isn't conforming to it and is instead proportionally shrinking to a size that isn't big enough. I'm not sure what the best way is to go about getting the image to fit inside it is.
If this isn't enough code, I'd be happy to supply more, and I'm open to fixing any other errors that I am overlooking.
Here is the HTML
<div class="span3 top1">
<div class="row">
<div class="span3 food1">
<img src="images/food1.jpg" alt="">
</div>
</div>
<div class="row">
<div class="span3 name1">
heres the name
</div>
</div>
<div class="row">
<div class="span3 description1">
heres where i describe and say "read more"
</div>
</div>
</div>
My CSS
.top1{
height:390px;
background-color:#FFFFFF;
margin-top:10px;
}
.food1{
background-color:#000000;
height:230px;
}
.name1{
background-color:#555555;
height:90px;
}
.description1{
background-color:#777777;
height:70px;
}

Answer 1

Try this way:
<div class="container">
<div class="col-md-4" style="padding-left: 0px; padding-right: 0px;">
<img src="images/food1.jpg" class="img-responsive">
</div>
</div>
UPDATE:
In Bootstrap 4 img-responsive becomes img-fluid, so the solution using Bootstrap 4 is:
<div class="container">
<div class="col-md-4 px-0">
<img src="images/food1.jpg" class="img-fluid">
</div>
</div>

Answer 2

You can explicitly define the width and height of images, but the results may not be the best looking.
.food1 img {
width:100%;
height: 230px;
}
jsFiddle
...per your comment, you could also just block any overflow - see this example to see an image restricted by height and cut off because it's too wide.
.top1 {
height:390px;
background-color:#FFFFFF;
margin-top:10px;
overflow: hidden;
}
.top1 img {
height:100%;
}

Answer 3

Just a heads up that Bootstrap 4 now uses img-fluid instead of img-responsive, so double check which version you're using if you're having problems.

Answer 4

Simply add the class img-responsive to your img tag, it is applicable in bootstrap 3 onward!

Answer 5

I used this and works for me.
<div class="col-sm-3">
<img src="xxx.png" style="width: auto; height: 195px;">
</div>

Answer 6

I had this same problem and stumbled upon the following simple solution. Just add a bit of padding to the image and it resizes itself to fit within the div.
<div class="col-sm-3">
<img src="xxx.png" class="img-responsive" style="padding-top: 5px">
</div>

Answer 7

If any of you looking for Bootstrap-4. Here it is
<div class="row no-gutters">
<div class="col-10">
<img class="img-fluid" src="/resources/img1.jpg" alt="">
</div>
</div>

Answer 8

Most of the time,bootstrap project uses jQuery, so you can use jQuery.
Just get the width and height of parent with JQuery.offsetHeight() and JQuery.offsetWidth(), and set them to the child element with JQuery.width() and JQuery.height().
If you want to make it responsive, repeat the above steps in the $(window).resize(func), as well.