Menu
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>
792
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
123
With bootstrap 4 there are display utilities which can be used to render different images for different viewport,
e.g.
<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="d-none d-sm-block" src="someimage.png"><!-- Image to show on screens from small to extra large -->
<img class="d-sm-none" src="someimagesmaller.png"><!-- Image to show on extra small screen (mobile portrait) -->
</a>
</div>
</div>
</nav>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
