image not resizing in twitter bootstrap responsive page design - html

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">
<img class="mod-picture" src="images/picture.jpg" alt="post picture" /> <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, then you may need to add the class 'img-responsive' to your 'img' tag.

Answer 2

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;
}

Answer 3

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;
}