Comment créer une image responsive dans Bootstrap ?

Le framework CSS Bootstrap, conçu par Twitter, permet de gérer simplement les images responsive. Voici comment.

Une image responsive est une image qui s'adapte selon la taille de la fenêtre sur un site internet. L'idée est issue du responsive design, un concept qui consiste à adapter le design d'un site internet selon la taille de l'écran qui l'affiche. L'ergonomie du site peut ainsi être adaptée aux différentes machines capables de naviguer sur Internet (smartphone, tablette, ordinateur).

Le framework CSS Bootstrap, conçu par Twitter, permet de gérer simplement les images responsive. Pour rendre une image responsive, il suffit de lui ajouter la classe img-responsive.

<img class=img-responsive src=img/image.png/>
Cette classe ajoute les propriétés suivantes à l'image :
max-width : 100%;
heigth: auto;
display: block;

L'image va ainsi s'adapter automatiquement à la largeur de l'élément qui la contient. Elle s'agrandira et se réduira avec la taille de l'élément, avec, comme limite, sa taille physique.

Si vous affichez l'image dans un élément plus grand qu'elle, elle n'occupera pas tout l'espace, car la propriété max-width indique que sa largeur maximale est égale à sa largeur physique. Si vous souhaitez que l'image puisse grossir au-delà et continuer à s'adapter à l'élément, il faut utiliser la propriété width pour indiquer une largeur fixe :

<img class=img-responsive src=img/image.png style=width:100%/>

L'image aura alors toujours la même largeur que l'élément qui la contient. Faites cependant attention à ce qu'elle ne soit pas trop grossie, sinon elle sera pixellisée et s'affichera mal à l'écran.

Bootstrap