Comment rendre les images adaptatives avec bootstrap

Comment bootstrap rend les images adaptatives :

1 Si vous insérez une image sur la page, ajoutez simplement class="img-responsive"
< img src="..." class="img-responsive center-block" >

2 Si c'est dans la page de contenu, utilisez simplement js pour ajouter des attributs à chaque img.

$(".setting img").addClass("img-responsive center-block"); //center-block L'image est centrée horizontalement

Dans Bootstrap version 3, en étant l'image L'ajout de la classe .img-responsive permet aux images de prendre en charge une mise en page réactive. L'essentiel est de définir les attributs max-width: 100%;, height: auto; et display: block; pour l'image, afin que l'image puisse être mieux mise à l'échelle dans son élément parent.

Pour des articles plus techniques liés à Bootstrap, veuillez visiter la colonne Tutoriel Bootstrap pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!