Bootstrap “img-responsive” isn't working in my code why?

Question

I want to make a logo responsive, so I have added img-reponsive and col-xs-12 in the img tag class and also specified width: 100% in the external stylesheet but it is not working.

I have made logo right side and it comes in a laptop but is not visible in mobile phones so I have added img-responsive in <img> and specified width: 100% and height: auto; for img-responsive in an external stylesheet and I have also specified @media but its the same

 #logo { padding-left: 380px; width: auto; height: 30%; position: fixed; float: right; border-bottom: 25px; padding-bottom: 25px; display: inline-block; top: -1em; } @media(max-width:568px) { #logo{ float: right; padding-left: 300px; width: inherit; height: inherit; position: fixed; } } @media(max-width:767px) { #logo{ float: right; padding-left: 200px; width: 100%; height: auto; position: fixed; } } .img-responsive{ display: block; max-width: 100%; width: 100%; height: auto; } 

 <nav class="navbar navbar-default navbar-fixed-top d-flex"> <div class="container"> <div id="nav"> <img src="images/logo.jpg" id="logo" class="img-responsive col-xs-12" /> </div> </div> </nav 

Answer 1

如果您使用bootsrap v4，则应该知道img-respond已更改为img-fluid，而col-xs-12已更改为col-12，您可以参阅站点文档Bootstrap V4.2文档

Answer 2

Bootstrap img-fluid img-respond更改为img-fluid

Answer 3

Did you try removing padding-left:200px; from mobile media query also with position:fixed; float:right is not a good practice and need to use img-fluid instead img-responsive.