Bootstrap image resize for small screen, not working
image, resize, twitter-bootstrap
Solution
I think the root of your problem is that you are expecting that the .img-responsive class will automatically make your images smaller for smaller screens, and this isn't exactly how it works.
It actually applies max-width: 100%; and height: auto; to the image, i.e. if it's a wide image it won't be wider than its parent. http://getbootstrap.com/css/#images
Hope this helps
Problem
I am trying to resize image using Bootstrap. I have a sufficiently large logo, for large screens & resolutions. Apparently, the image should resize well in all resolutions (small & big resolutions). I have used the Bootstrap’s .img-responsive class for making images responsive. As is evident, image shows fine in large resolutions, but the image should become small in smaller resolutions. The problem is that - image is not getting smaller in smaller resolutions. Any help would be highly appreciated. ``` <BODY> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header col-xs-3 col-md-3"> <a class="navbar-brand" href="#"> <img class="img-responsive" src="someimage.png"> </a> </div> <div class="col-xs-9 col-md-9"> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><img class="img-responsive" src="A1.png"></a></li> <li><a href="#"><img class="img-responsive" src="A2.png"></a></li> </ul> </div> </div> </nav> </BODY> ```