Adjust and size the image to set the div (bootstrap)

Question

I am trying to get an image according to a specific div size. Unfortunately, the image does not match it and instead is proportionally reduced to a size that is not large enough. I'm not sure the best way is to get the image to fit in it.

If this is not enough, I will be happy to provide more, and I am open to fixing any other errors that I am missing.

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

You can explicitly define width and height images, but the results may not be the best.

 .food1 img { width:100%; height: 230px; } 

jsFiddle

---

... for your comment, you can also block any overflow - see this example to see an image limited in height and cut off, because it is also wide.

 .top1 { height:390px; background-color:#FFFFFF; margin-top:10px; overflow: hidden; } .top1 img { height:100%; } 

Answer 2

Try this:

 <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 a solution using Bootstrap 4:

 <div class="container"><div class="col-md-4 px-0"> <img src="images/food1.jpg" class="img-fluid"> </div> </div> 

Answer 3

It's just the head that Bootstrap 4 now uses img-fluid instead of img-responsive , so double check which version you are using if you have problems.

Answer 4

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

Answer 5

I had the same problem and came across the following simple solution. Just add a little indentation to the image and it will resize to fit in the div.

 <div class="col-sm-3"> <img src="xxx.png" class="img-responsive" style="padding-top: 5px"> </div> 

Answer 6

I used this and works for me.

 <div class="col-sm-3"> <img src="xxx.png" style="width: auto; height: 195px;"> </div> 

Answer 7

In most cases, the bootstrap project uses jQuery, so you can use jQuery.

Just enter the width and height of the parent with JQuery.offsetHeight() and JQuery.offsetWidth() and set them to the child with JQuery.width() and JQuery.height() .

If you want to make it responsive, repeat the steps above in $(window).resize(func) .

Answer 8

If any of you are looking for Bootstrap-4 . Here

 <div class="row no-gutters"> <div class="col-10"> <img class="img-fluid" src="/resources/img1.jpg" alt=""> </div> </div>