web-dev-qa-db-fra.com

Les images ne répondent pas par défaut sur Twitter Bootstrap 3?

Il semble qu'avec la nouvelle version 3.0, je dois définir les noms de classe d'une image sur col-lg-4 col-sm-4 col-4 si l'image fait partie de div avec les mêmes noms de classe pour rendre l'image sensible avec tous les points d'arrêt.

Dans la version 2, les propriétés CSS des images héritent par défaut des propriétés div du parent.

Est-ce correct?

javascripttwitter-bootstraptwitter-bootstrap-3responsive-design
56
Laurent-514

Bootstrap 4

Pour Bootstrap 4 utilisez Sass (SCSS):

// make images responisve by default
img {
  @extend .img-fluid;    
}

réponse mise à jour pour la version 3

Bootstrap 3 a une classe spéciale pour les images réactives (régler max-width sur 100%). Cette classe est définie comme:

.img-responsive {
 display: block;
 height: auto;
 max-width: 100%;
}

Remarque la balise img obtient par défaut:

img {
     vertical-align: middle;
     border: 0;
     page-break-inside: avoid;
     max-width: 100% !important;
     }

Alors utilisez class="img-responsive" pour rendre vos images réactives.

Pour rendre toutes les images réactives par défaut:

css: ajoutez le code ci-dessous sous le bootstrap css:

   img {
          display: block;
          height: auto;
          max-width: 100%;
   }

less: ajoutez le code ci-dessous dans votre mixins.less:

img {
  &:extend(.img-responsive);
}

Note: nécessite moins de 1.4.0. voir: https://stackoverflow.com/a/15573240/1596547

Carrousel

les étiquettes img à l'intérieur d'un carrousel sont réactives par défaut

Règles sémantiques

Voir aussi la réponse de @ its-me ( https://stackoverflow.com/a/18653778/1596547 ). Utiliser ce qui précède pour rendre toutes vos images réactives par défaut les convertit en éléments au niveau du bloc . Les éléments de niveau bloc ne sont pas autorisés dans les paragraphes (<p>), voir: https://stackoverflow.com/a/4291515/1596547

Autant que je sache, la distinction entre les éléments de niveau bloc et inline est remplacée par un ensemble plus complexe de catégories de contenu. Voir aussi: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente#Inline_vs._block-level . Ainsi, en HTML5, une balise p peut contenir n’importe quel élément de formulation mélangé avec des données de caractères normales. (voir: http://www.w3.org/TR/html-markup/p.html ) La balise img est un tel élément de formulation. La valeur par défaut de la balise img pour la propriété display est bien inline-block. Changer la propriété d'affichage pour bloquer ne viole aucune des règles précédentes.

Éléments de niveau bloc (display:block) prend tout l’espace disponible de leur parent, ce qui semble exactement ce que vous attendez pour des images réactives. Donc, mettre display: block; semble un choix raisonnable, qui doit être préféré au inline-block déclaration.

Images à l'intérieur de p éléments nécessitant inline-block comme suggéré par @ its-me ( https://stackoverflow.com/a/18653778/1596547 ) ne devrait peut-être pas être réactif du tout.

142
Bass Jobsen

Excellente suggestion de @BassJobsen, mais j'utiliserais display: inline-block; au lieu de display: block; comme cela semble plus sémantique 1 (ce qui signifie que vous pouvez être un peu plus sûr de ne pas déconner ailleurs).

Alors, le mien ressemblerait à ceci:

img {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

S'il vous plaît faites le moi savoir si ma compréhension est imparfaite. :)

[1]: Premièrement, les images sont presque toujours entourées d'un élément de niveau bloc, si c'est le cas d'utilisation. et encore une fois, nous utilisons également des images dans des éléments tels que des paragraphes (p), où un inline-block _ serait plus approprié qu'un élément block.

13
its_me

Je suis arrivé ici après avoir essayé de savoir s'il est sécuritaire d'appliquer img-responsive pour toutes les images.

La réponse de @its_me m'a amené à penser qu'il n'était pas prudent d'appliquer ceci aux images sous un élément p.

Cela ne semble pas être ce que pense l'équipe bootstrap).

C'est pourquoi les images ne sont pas réactives par défaut dans bootstrap3:

En résumé, il casse une tonne de widgets tiers non suspects (y compris Google Maps), qui naturellement n’anticipent pas que les images qu’ils contiennent soient redimensionnées de manière forcée sur d’autres largeurs. C'est pourquoi nous avons annulé Bootstrap v2 "par défaut" dans Bootstrap v3 en faveur d'une classe explicite .img-responsive.

https://github.com/twbs/bootstrap/issues/18178#issuecomment-154180107

0
tepez