Images
Ajoutez une image ou une galerie d'images à une page, ajoutez des variantes d'image pour le mode sombre, et redimensionnez et alignez les images selon vos besoins
Vous pouvez insérer des images dans votre page, puis choisir leur taille et si elles doivent être alignées à gauche, au centre ou à droite. Vous pouvez également, en option, inclure un texte alternatif et/ou une légende dans votre bloc d'image.
Exemple d'un bloc d'image
Téléverser une image
Il y a deux façons d'ajouter des images à votre contenu :
Glissez-déposez l'image depuis votre gestionnaire de fichiers directement dans un bloc vide de votre page.
Ajouter un bloc image à votre page et utilisez le Sélectionner des images panneau latéral qui apparaît à droite de la fenêtre.
Si vous suivez le deuxième processus, vous pouvez choisir de téléverser un fichier, sélectionner un fichier précédemment téléversé, coller une URL d'image ou ajouter une image depuis Unsplash en utilisant la recherche intégrée.
GitBook vous permet de téléverser des images jusqu'à 100 Mo par fichier.
Créer une galerie d'images
Ajouter plus d'une image à un bloc d'image créera une galerie. Pour ce faire, ouvrez le menu Options 
de la carte et choisissez Ajouter des images… pour ouvrir le Sélectionner des images panneau latéral à nouveau.
Pour supprimer une image d'une galerie, ouvrez le menu Modifier 
sur l'image que vous souhaitez supprimer et appuyez sur la touche Supprimer ⌫ du clavier.
Ajouter des images pour le mode clair et sombre
Vous pouvez définir des images différentes pour les versions en mode clair et en mode sombre de votre site publié. GitBook affichera automatiquement l'image correcte en fonction du mode de votre visiteur.
Pour ajouter une image pour le mode sombre, survolez votre image, ouvrez le menu Modifier et cliquez sur Remplacer l'image 
.
Dans le menu déroulant, choisissez Ajouter une image pour le mode sombre. Une fois que vous avez défini cela, vous pouvez remplacer l'une ou l'autre image depuis ce même menu.
Remarque : GitBook ne prend pas encore en charge les images pour les modes clair et sombre dans certains cas, notamment les couvertures de page ou les couvertures d'image sur cartes.
Images pour les modes clair et sombre via la synchronisation GitHub/GitLab
Vous pouvez également ajouter des images pour les modes clair et sombre en Markdown via la syntaxe HTML (<picture> et <source>).
Pour les images de bloc, utilisez l'élément <figure> HTML avec un <picture> et <source> à l'intérieur :
Pour les images en ligne (images intégrées dans le texte), utilisez le <picture> HTML avec un <source> à l'intérieur :
Remarque : Nous ne supportons pas encore la syntaxe réservée à GitHub via #gh-dark-mode-only ou #gh-light-mode-only.
Redimensionnement
Pour redimensionner votre image, survolez-la et ouvrez le menu Modifier . Cliquez sur le bouton Taille pour changer la taille de votre image parmi les options disponibles.
Petit – 25 % de la taille de l'image
Moyen – 50 % de la taille de l'image
Grand – 75 % de la taille de l'image
Adapter – Supprime toutes les spécifications de taille et affiche soit à taille réelle soit plafonné à une largeur maximale de 735 pixels pour les images plus grandes.
Si votre image est plus large que l'éditeur, GitBook limitera la largeur de l'image à la largeur de l'éditeur à la place, et le redimensionnement sera basé sur cette limite.
Vous pouvez rendre les blocs d'image s'étendre sur toute la largeur de votre fenêtre en cliquant sur le menu Options à côté du bloc et en choisissant Pleine largeur.
Redimensionnement des images via la synchronisation Git
Si vous voulez plus de contrôle sur la taille de votre image, vous pouvez spécifier la taille exacte en utilisant Markdown dans GitHub ou GitLab.
Lorsque nous exportons une image, nous utilisons la balise HTML <img/>. Conformément aux spécifications, nous pouvons indiquer les dimensions de l'image en utilisant les attributs width et height qui n'acceptent que des valeurs en pixels ou une combinaison d'un nombre et d'un % signe.
Variantes valides pour spécifier les dimensions de l'image :
<img width="100" /> Définit l'image à une largeur de 100 pixels
<img width="100%" /> Définit l'image à la taille complète (bien que ceci soit limité par l'éditeur)
Aligner les images
Par défaut, les blocs d'image afficheront votre image à taille réelle, alignée au centre.
Pour changer l'alignement d'une image, ouvrez le menu Options du bloc et choisissez l'alignement souhaité. Cela n'affectera que les images qui sont plus étroites que l'éditeur, ou les images que vous avez redimensionnées.
Encadrer les images
Vous pouvez ajouter un cadre aux blocs d'image pour donner à vos images un aspect cohérent et les séparer visuellement du contenu qui les entoure.
Pour ajouter un cadre à une image, survolez-la, ouvrez le menu Options du bloc et activez le Avec cadre bascule.
Représentation en Markdown
Mis à jour
Ce contenu vous a-t-il été utile ?