Images et texte

Images d’exemple

Les images de cette documentation sont des motifs abstraits générés pour l’illustration. Remplacez-les par vos propres fichiers locaux.

Image à côté du texte

Classe	Position de l’image	Part de l’image
image-text	Gauche	50 %
text-image	Droite	50 %
image-text-80	Gauche	80 %
text-image-80	Droite	80 %

Les suffixes disponibles sont 10 à 90, par pas de 10. Le nombre désigne toujours l’image, quel que soit le côté. Il s’applique à la largeur restante après les marges et l’espacement de 28 pixels entre les zones.

La structure attendue : une image seule dans son paragraphe et un unique bloc de texte >, qui peut contenir plusieurs éléments.

<!-- _class: content text-image-60 with-title with-legend fit small -->

# Architecture

![](architecture.png)

> ## Fonctionnement
>
> Le système reçoit une demande et prépare une réponse.
>
> - Une entrée
> - Un traitement

Source : documentation interne (exemple).

Le placement vient des classes : pour passer l’image à gauche, changez text-image-60 en image-text-60, sans déplacer l’image dans le Markdown.

<!-- _class: content image-text-40 with-title cards -->

# Le terrain

![](equipe.png)

> ## Ce que nous avons vu
>
> Des équipes motivées et des outils à simplifier.

Une image, un bloc de texte

Plusieurs blocs de texte ou plusieurs images sont affectés aux mêmes cellules et peuvent se superposer. Un ratio de 90 % ne laisse que 10 % au texte : réservez-le à une annotation courte.

Une grande image

Il faut distinguer la composition, qui définit la zone de l’image, et l’ajustement, qui définit comment l’image remplit cette zone.

Classe	Catégorie	Effet
image-fit	Composition	Une grande image dans la zone de contenu, avec les marges
image-full	Composition	Une image sur toute la slide, derrière le titre et la légende
fit	Ajustement	Conserve toute l’image, avec des espaces libres si nécessaire
bg	Ajustement	Remplit le cadre et recadre l’excédent (recadrage centré)

fit est le comportement par défaut, y compris pour image-full.

image-fit

<!-- _class: content image-fit fit with-title -->

# Vue d’ensemble

![](visuel.png)

image-full bg

Pour remplir la slide bord à bord, écrivez image-full bg. Le titre et la légende reçoivent un fond uni pour rester lisibles.

<!-- _class: content image-full bg with-title with-legend -->

# Le chantier

![](chantier.png)

Image illustrative.

bg n’est pas ![bg](…)

La classe bg du langage n’a rien à voir avec la syntaxe native ![bg](image.png) de Marp. Pour ces compositions, utilisez ![](image.png). La syntaxe native Marp réserve elle-même des espaces et n’est pas gérée par ce thème comme un mode équivalent.

Il n’existe pas d’option de point focal dans cette version : le recadrage reste centré.