Adjusting and image Size to fit a div bootstrap

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   lt div class  span3 top1  gt             lt div class  row  gt             lt div class  span3 food1  gt                 lt img src  images food1 jpg  alt    gt             lt  div gt           lt  div gt               lt div class  row  gt                 lt div class  span3 name1  gt                    heres the name              lt  div gt               lt  div gt             lt div class  row  gt                 lt div class  span3 description1  gt                    heres where i describe and say  read more               lt  div gt               lt  div gt           lt  div gt    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

User · Answer

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

User · Answer

I used this and works for me    lt div class  col-sm-3  gt     lt img src  xxx png  style  width  auto  height  195px   gt   lt  div gt

User · Answer

If any of you looking for Bootstrap-4  Here it is   lt div class  row no-gutters  gt       lt div class  col-10  gt           lt img class  img-fluid  src   resources img1 jpg  alt    gt       lt  div gt   lt  div gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    lt div class  col-sm-3  gt     lt img src  xxx png  class  img-responsive  style  padding-top  5px  gt   lt  div gt

User · Answer

Try this way        lt div class  container  gt       lt div class  col-md-4  style  padding-left  0px   padding-right  0px   gt           lt img src  images food1 jpg  class  img-responsive  gt       lt  div gt   lt  div gt    UPDATE   In Bootstrap 4 img-responsive becomes img-fluid  so the solution using Bootstrap 4 is    lt div class  container  gt       lt div class  col-md-4 px-0  gt           lt img src  images food1 jpg  class  img-fluid  gt       lt  div gt   lt  div gt

[html] Adjusting and image Size to fit a div (bootstrap)

Examples related to html

Examples related to css

Examples related to twitter-bootstrap