Bootstrap image redimensionner pour le petit écran, pas de travail

Je suis en train de redimensionner l'image à l'aide de Bootstrap. J'ai suffisamment grand logo, pour les grands écrans & résolutions. Apparemment, l'image à redimensionner dans toutes les résolutions (small & grandes résolutions).
J'ai utilisé le Bootstrap .img-responsive classe pour faire des images sensibles. Il est clair que l'image montre bien dans de grandes résolutions, mais l'image doit se faire petit dans les petites résolutions. Le problème est que l'image n'est pas de plus en plus petites dans les petites résolutions.
Toute aide serait très appréciée.

<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>
Mettre la balise img n'importe où vous le souhaitez, une NAV ou DIV (conteneur), les résultats devraient être les mêmes. <img class="img-responsive" src="someimage.png">
Je suppose que ton problème est lié à l'élément parent. Veuillez fournir un peu de code pour nous, ou mieux de créer un exemple de bootply avec votre problème. Sans cela, il est difficile de vous aider.
Vous pouvez aussi voir ici enterhelix.com/new de Sorte que vous pouvez voir que les images ne sont pas de contraction ou à l'expansion de la résolution. Ils restent toujours les mêmes.
La prochaine fois, s'il vous plaît ajouter votre code à votre question via le edit fonction. J'ai essayé votre code d'exemple, il fonctionne très bien pour moi (bootply.com/TmSwClXC1Y). Votre problème semble être ailleurs.
Quel est donc le problème? Le Logo de la redimensionne pour moi parfaitement sur votre enterhelix.com/new site..

OriginalL'auteur Jay | 2014-07-11

  1. 6

    Je pense que la racine de votre problème est que vous vous attendez que l' .img-responsive classe automatiquement vos images en plus petit pour les petits écrans, et ce n'est pas exactement comment il fonctionne.

    Elle s'applique effectivement max-width: 100%; height: auto; à l'image, c'est à dire si c'est une grande image, il ne sera pas plus large que son parent. http://getbootstrap.com/css/#images

    Espère que cette aide

    Oui, c'est ce que j'ai exactement attendre. Donc, pour faire des petits pour les petites résolutions, que dois-je faire? Dois-je utiliser mon propre média-queries c'est à dire, des images différentes pour différentes résolutions.
    oui media-queries serait une option. Le défi pourrait être que, comme le bootstrap grille des modifications ou s'effondre, la largeur de l'image des parents va changer et donc vous aurez besoin de plusieurs règles pour permettre la fenêtre ou la fenêtre d'affichage de la largeur, ainsi que les détails de vos images. J'ai joué avec une idée si c'est pour vous: codepen.io/panchroma/stylo/DxzJA ... bonne chance!
    Oui, c'est exactement ce que je pense. Je dois écrire plusieurs règles. Je me demande, Bootstrap est si populaire et pourquoi ils n'ont pas à satisfaire à cette chose de très commun. Merci pour votre aide.
    Pourriez-vous répondre à cette question, stackoverflow.com/questions/24709760/...
    pourquoi ils n'ont pas à satisfaire à cette chose de très commun? .. Bootstrap peut être un formidable gain de temps, mais ce n'est pas le seul cheval dans la ville. Il ya beaucoup d'autres options, et ils ont tous leurs forces et les différences et, si vous préférez vous un sur l'autre. Si vous ne l'avez pas déjà, quelques autres personnes que vous pourriez regarder sont foundation.zurb.com ou getskeleton.com . Ils sont tous bons 😉

    OriginalL'auteur David Taiaroa

  2. 1
    <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>  `

    OriginalL'auteur Philomena

  3. 1

    Avec bootstrap 4 il y a des utilitaires d'affichage qui peut être utilisé pour afficher des images différentes pour différentes fenêtre d'affichage,

    par exemple

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

    OriginalL'auteur Deepak Kumar

  4. -2

    utiliser l'class="img-responsive" et qu'il réduira l'image lorsque vous ouvrez dans portable ou un autre appareil à l'aide de bootstrap css. mais pour u sa ne fonctionne pas u peut vérifier le bon liens que vous avez ajouté dans les en-têtes.

    OriginalL'auteur Karthick