image not resizing in twitter bootstrap responsive page design

Question

I have a web page which is designed using twitter bootstrap along with it's responsive css inclusion to make everything responsive on different window sizes.But the image in the following codes not re-sizing itself when browser resized, so is not showing responsiveness

<div class="container-fluid">
    <div class="row-fluid">
    <div class="span"> <div class="media">
    <a href="http://facebook.com" target="_blank" class="media-link"><img class="mod-picture" src="images/picture.jpg" alt="post picture" /></a> <div class="media-container"><a class="link-name" href="#" target="_blank">media name</a></div>
    </div></div></div></div>

    In css file styles are - 
    .media-link
    {
            float:left;
        border:1px solid #ccc;
        display:inline-block;
        color:#3B5998;
        cursor:pointer; 
        margin-right:5px;
    }
    .mod-picture{
        margin-right:10px;
        border:0;
        display:block;
        margin:3px;
    }

but if i remove float:left; and display:inline-block; styles from media-link class then image is resizing on browser window size changes.But i can't remove these two properties because next content with class "media-container" need to be appear on right.I tried in many ways like adding float:left in the div before link but failed.Please suggest me.

Answer 1

If you are using bootstrap 3 which you should. Then just add class img-responsive to img tag. and That's all to make it responsive.

Here is CDN link for bootstrap3 css. You don't even need to add bootstrap-responsive css.

//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"

In case bootstrap 2.3 existing problem use this-

<div class="container-fluid">
 <div class="row-fluid">
  <div class="span-12">
   <div class="media">
     <a href="http://facebook.com" target="_blank" class="media-link">
      <img class="mod-picture" src="images/picture.jpg" alt="post picture" />
     </a>
     <div class="media-container">
      <a class="link-name" href="#" target="_blank">media name</a>
     </div>
    </div>
    <div style="clear:both"></div>
   </div>
  </div>
</div>


.mod-picture{
  width:40%;
  padding:5%;
  max-width: 200px;
  height:auto;
  float:left;
}
 .media-container{
   display:inline-block;
 }

Answer 2

If you are using bootstrap 3, then you may need to add the class 'img-responsive' to your 'img' tag.

Answer 3

You can take styles from Bootstrap 3 and apply for your code:

<a href="http://facebook.com" target="_blank" class="media-link">
   <img class="mod-picture" src="images/picture.jpg" alt="post picture" />
</a>

.media-link{
  //nothing styles
}

.mod-picture{
  // max width of image
  max-width: 50%;
  float: left;
  display: block;
  border:1px solid #ccc;
}