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

Publié par Jean-Michel le

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.

Lire également:  Wordpress : $.scrollTo ne fonctionne pas dans Chrome

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.

Lire également:  Wordpress : Page d'articles conçue pour ressembler à la page d'accueil

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.

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *