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: Use the CSS max-width Property You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.
Images in Bootstrap are made responsive with . img-fluid . max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
Give the container a fixed height and then for the img tag inside it, set width and max-height . The difference is that you set the width to be 100%, not the max-width .
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>
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%; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With