Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adjusting and image Size to fit a div (bootstrap)

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;   } 
like image 404
smilefreak24 Avatar asked May 09 '13 16:05

smilefreak24


People also ask

How do I make an image fit a div perfectly?

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.

How can set width and height of image in Bootstrap?

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.

How do I make an image not overflow in a div?

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 .


2 Answers

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> 
like image 186
Shafeeque S Avatar answered Sep 29 '22 10:09

Shafeeque S


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%; } 
like image 24
jterry Avatar answered Sep 29 '22 10:09

jterry