All geek questions in one place

The size of the boot image for a small screen does not work

I am trying to resize an image using Bootstrap. I have a large enough logo for large screens and resolutions. Apparently, the image should change well in all resolutions (small and large resolutions). I used the Bootstraps.img revocation class to make images susceptible. As you can see, the image is clearly visible in high resolutions, but the image should become small in lower resolutions. The problem is that - the image does not get smaller at lower resolutions. Any help would be greatly 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>
+4
source share
4 answers

, , , .img- , , .

: 100%; : ; , , , . http://getbootstrap.com/css/#images

,

+6
<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>  `
+1

4 , ,

.

<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>
+1

use class = "img-responsive" and it will reduce the image when opened on a mobile device or other device using bootstrap css. but for u does not work, you can check the correct links added to the headers.

-2
source

Source: https://habr.com/ru/post/1548046/

More articles:


All Articles