Une image vaut mille mots… mais encore faut-il la voir correctement ! Il est souvent difficile de faire parfaitement cadrer une image dans un conteneur HTML, pour l’afficher sur un site Web. Depuis quelques années, les tailles d’écran varient énormément, du minuscule iPhone 4 à l’écran panoramique 30 pouces. Twitter Boostrap offer une manière élégante de redimensionner une image en l’adaptant automatiquement au conteneur dans lequel elle se trouve.

Une image vaut mille mots… mais encore faut-il la voir correctement ! Il est souvent difficile de faire parfaitement cadrer une image dans un conteneur HTML, pour l’afficher sur un site Web. Depuis quelques années, les tailles d’écran varient énormément, du minuscule iPhone 4 à l’écran panoramique 30 pouces. Twitter Boostrap offer une manière élégante de redimensionner une image en l’adaptant automatiquement au conteneur dans lequel elle se trouve.

La documentation est accessible ici : http://getbootstrap.com/components/#responsive-embed.

C’est cette méthode qui est utilisée dans la nouvelle page d’accueil de ce site. Mais avec une subtilité : un seul fichier doit être utilisé pour afficher l’image dans différentes tailles, sur la page d’accueil que la « boîte » qui la contient occupe une ou plusieurs colonnes, ou dans le corps des articles.

L’image est donc référencée dans le frontmatter de charque article, de cette manière :

thumbnail: /public/posts/2015-07-04-bootstrap-responsive-images/rainbow.jpg

Dans le code source de la page d’accueil, l’on trouve les instructions pour afficher l’image :

{% if post.thumbnail %}
    <img class="img-responsive" src="{{ post.thumbnail }}" />
{% endif %}

La classe img-responsive appartient à Bootstrap, c’est elle qui fait le boulot. Quant à l’image, elle peut être définie au moment de l’écrite de l’article, sans toucher au code source : elle trouvera automatiquement la bonne place.

À titre d’exemple, l’image utilisée dans cet article apparaît ci-dessous à la taille de la page (elle ne déborde pas). Il suffit de cliquer dessus pour l’afficher en pleine résolution.

À Montpellier, le samedi 4 juillet 2015