css - Image responsive in bootstrap to fill column -

i have bootstrap column defined follows:

<div class="col-md-4 limit">     <img id="myimage" src="" class="img-responsive"/> </div>  <style>     .limit {         max-height:500px;         overflow:hidden;       } </style> 

the source of image obtained programatically not know in advance height or width of image. want image in column height limited appear inside of div. img-responsive class have achieved image horizontally fill column, however, class sets height auto, of time causes image overflow , hidden. not want image overflow in way.

so, lets column measures:

• width: 300px (defined bootstrap)
• height: 500px (.limit)

and image dimensions are:

• width: 600px
• height: 1500px

the current configuration makes image shrink 300px x 750px. container set 500px, causes last 250px lost inside overflow. image instead resized 200px x 500px in order containing div

how can this? thanks!

try this:

<div class="row">     <div class="col-md-4">         <div class="limit">             <img src="images/yourimage.png" alt="" />         </div>     </div> </div>  <style type="text/css">     .limit{         width: 300px;         height: 500px;         max-height: 500px;         overflow: hidden;      }     .limit img{        width: 100%;        height: 100%;      }  </style>