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; }
...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
Post a Comment