Les images ne sont pas réactives par défaut dans Twitter Bootstrap 3 ?

Question

Il semble qu'avec la nouvelle version 3.0, je doive définir les noms de classe d'une image comme suit col-lg-4 col-sm-4 col-4 si l'image fait partie d'un div avec les mêmes noms de classe pour rendre l'image réactive 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 ?

Answer 1

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 possède une classe spéciale pour les images réactives (dont la largeur maximale est fixée à 100 %). Cette classe est définie comme suit :

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

Notez que la balise img est utilisée 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 que toutes les images soient réactives par défaut :

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

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

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

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

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

Carrousel

balises 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 ). L'utilisation de ce qui précède pour rendre toutes vos images réactives par défaut transforme vos images 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

D'après ce que j'ai compris, la distinction entre les éléments de niveau bloc et les éléments en ligne 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 phrasé mélangé à des données de caractères normales. (voir : http://www.w3.org/TR/html-markup/p.html ) Le img est un tel élément de formulation. Le site img la valeur par défaut de la balise display est en effet inline-block . Le fait de changer la propriété d'affichage en bloc n'enfreint aucune des règles précédentes.

Les éléments de niveau bloc ( display:block ) prennent tout l'espace disponible de leur parent, ce qui semble être exactement ce que l'on attend des images réactives. Ainsi, la définition de display: block; semble un choix raisonnable, qu'il faut préférer à la inline-block déclaration.

Les images à l'intérieur des éléments p qui nécessitent inline-block comme le suggère @its-me ( https://stackoverflow.com/a/18653778/1596547 ) ne devrait peut-être pas être réactif du tout.

Answer 2

Excellente suggestion de @BassJobsen, mais j'utiliserais plutôt display: inline-block; au lieu de display: block; car cela semble plus sémantique 1 (ce qui vous permet d'être un peu plus sûr de ne pas faire d'erreur ailleurs).

Donc, le mien ressemblerait à ça :

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

Veuillez me faire savoir si ma compréhension est erronée. :)

---

[1] : D'une part, les images sont presque toujours enveloppées dans un élément de niveau bloc si tel est le cas d'utilisation ; et d'autre part, nous utilisons également des images dans des éléments tels que les paragraphes ( p ), où un inline-block serait plus approprié qu'un block élément.

Answer 3

Je suis arrivé ici après avoir essayé de savoir si c'était sûr de faire une demande. img-responsive pour toutes les images.

La réponse de @its_me m'a conduit à penser qu'il n'est pas sûr d'appliquer cela pour les images sous un p élément.

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

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

En résumé, cela casse une tonne de widgets tiers sans méfiance (y compris Google Maps), qui n'ont pas prévu que les images qu'ils contiennent soient redimensionnées de force à d'autres largeurs. C'est pourquoi, dans la version 3 de Bootstrap, nous avons abandonné l'approche " les images sont réactives par défaut " de Bootstrap v2 au profit d'une classe .img-responsive explicite.

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