CODEWITHSUNDEEP
imagetwitter-bootstrapresize
Jay
Jay

Reputation: 782

Bootstrap image resize for small screen, not working

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>

Upvotes: 5

Views: 23496

Answers (5)

Nirmalya Mondal
Nirmalya Mondal

Reputation: 66

In Bootstrap version 4 class ".img-responsive" has been changed to ".img-fluid".

Upvotes: 2

Deepak Kumar
Deepak Kumar

Reputation: 683

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>

Upvotes: 3

Philomena
Philomena

Reputation: 21

<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="hidden-xs" src="someimage.png">
<img class="visible-xs" src="someimagesmaller.png">
           </a> 
       </div> 
       <div class="col-xs-9 col-md-9"> 
           <ul class="nav navbar-nav navbar-right"> 
               <li><a href="#"><img class="hidden-xs" src="A1.png">
  <img class="visible-xs" src="A1smaller.png"></a></li> 
        <li><a href="#"><img class="img-responsive" src="A2.png"> </a></li> 
           </ul> 
       </div> 
     </div> 
   </nav>  `

Upvotes: 1

Karthick
Karthick

Reputation: 73

use the class="img-responsive" and it will shrink the image when you open in mobile or other device using bootstrap css. but for u its not working can u check the correct links you added in the headers.

Upvotes: -3

David Taiaroa
David Taiaroa

Reputation: 25495

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

Upvotes: 7

Related Questions