Comment adapter les images à l'écran dans bootstrap

Comment adapter les images bootstrap à l'écran

Le paramètre correct pour les images réactives bootstrap est de les ajouter ci-dessus img Allez simplement dans deux catégories.

<img src="..." class="img-responsive center-block" >

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

$(window).load(function(){
 
    $(".panel-body img").addClass("img-responsive center-block");
 
})

Dans la version 3 de Bootstrap, les images peuvent prendre en charge la mise en page réactive en ajoutant la classe .img-responsive à l'image. 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.

Si vous devez centrer l'image à l'aide de la classe .img-responsive horizontalement, veuillez utiliser la classe .center-block au lieu de .text-center.

Images SVG et IE 8-10

Dans Internet Explorer 8-10, les images SVG définies sur .img-responsive semblent avoir des dimensions inégales. Pour résoudre ce problème, ajoutez width: 100% 9; Bootstrap ne définit pas automatiquement cette propriété pour tous les éléments de l'image, car cela entraînerait des erreurs dans d'autres formats d'image.

Recommandations associées : "Tutoriel bootstrap"

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!