Adjusting and image Size to fit a div (bootstrap)
HtmlCssTwitter BootstrapHtml Problem Overview
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;
}
Html Solutions
Solution 1 - Html
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>
Solution 2 - Html
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;
}
...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%;
}
Solution 3 - Html
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.
Solution 4 - Html
Simply add the class img-responsive
to your img
tag, it is applicable in bootstrap 3 onward!
Solution 5 - Html
I used this and works for me.
<div class="col-sm-3">
<img src="xxx.png" style="width: auto; height: 195px;">
</div>
Solution 6 - Html
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>
Solution 7 - Html
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>
Solution 8 - Html
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.