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


i'm trying image fit within specific size div. unfortunately, image isn't conforming , instead proportionally shrinking size isn't big enough. i'm not sure best way go getting image fit inside is.

if isn't enough code, i'd happy supply more, , i'm open fixing other errors overlooking.

here 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 name             </div>             </div>           <div class="row">               <div class="span3 description1">                   heres describe , "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;   } 

you can explicitly define width , height of images, results may not best looking.

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

jsfiddle


...per comment, block overflow - see this example see image restricted height , cut off because it's wide.

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

Comments

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

c++ - qgraphicsview horizontal scrolling always has a vertical delta -