WordPress : Je veux appliquer la classe css (bootstrap) .img-responsive sur toutes les images de contenu

Je développe un thème WordPress à l’aide de bootstrap donc j’applique manuellement des cas sur toutes les images de contenu comme ceci :

<img src="images/logo_03.png" class="img-responsive">

Existe-t-il un moyen d’appliquer automatiquement les mêmes propriétés de classe ? Je ne veux pas interroger à cette fin. Je suis sûr que bootstrap a un moyen de résoudre mon problème, alors faites-moi savoir toute solution avec CSS.

Solution n°1 trouvée

Il devrait être assez facile d’ajouter la classe en fonction de l’attribut element, voir ci-dessous :

<script type="text/javascript">
    $(document).ready(function() {
        $("img").addClass("img-responsive");
});
</script>

Solution n°2 trouvée

Vous pouvez utiliser les mixins LESS directement dans votre thème. Si vous voulez que toutes les images soient réactives, vous pouvez dire :

//in your theme.less file
img {
  .img-responsive();
}

Vous donnera ceci dans votre theme.cssdossier :

img {
  //all Bootrap CSS properties that make your image responsive
  //including surrounding media queries
}

Cependant, cela n’est pas recommandé car cela s’applique à toutes les <img>balises.

Une option plus professionnelle serait de faire en sorte que votre classe ressemble à :

//in your theme.less file
.theme-img {
  .img-responsive();
  //additional theme-specific styling
  border: 1px solid blue;
}

et appliquez-le à vos images :

<img class="theme-img" src="..." />

Mise à jour : contrairement aux autres réponses qui suggèrent d’utiliser jQuery, cette solution ne nécessite aucun script et fonctionne dans les anciens navigateurs (par exemple, IE). En outre, cela fonctionnera pour toute <img>balise insérée dans le document même après l’exécution du code jQuery. Si vous décidez d’utiliser Javascript, cependant, je vous recommande de l’utiliser document.querySelectAll()car il n’a pas besoin de jQuery et s’exécute légèrement plus rapidement.

Solution n°3 trouvée

La meilleure façon est d’utiliser les déclarations fournies par bootstrap pour la classe .img-responsivedans votre CSS.

Par exemple, vous pouvez définir toutes les images de votre site Web avec le contenu de cette classe :

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

et c’est tout.

Toutes vos images auront le contenu de la classe .img-responsivesans avoir besoin de le préciser.