CSS object-fit dans Figma : comment l'ajustement d'image, background-size et la résolution se transposent

Réponse courte : l'ajustement se transpose bien, la résolution non

object-fit et background-size en CSS décrivent les mêmes décisions que les modes de remplissage d'image de Figma : mettre l'image à l'échelle pour couvrir la boîte, la mettre à l'échelle pour qu'elle tienne dans la boîte, ou la répéter. Les noms diffèrent, mais le comportement correspond de près. La résolution est une autre histoire. Une règle CSS ne dit rien du nombre de pixels que contient le fichier, si bien qu'une image nette sur la page peut arriver floue dans Figma.

Cette référence couvre les cinq valeurs de object-fit, les mots-clés de background-size, les quatre modes de remplissage de Figma et les règles de résolution qui décident si une image importée rend bien. Elle s'adresse aux designers qui ouvrent une page importée et ont besoin de savoir quoi vérifier sur chaque calque d'image.

object-fit et les modes de remplissage de Figma

Les cinq valeurs de object-fit

Selon la référence MDN sur object-fit, la propriété définit comment le contenu d'un élément remplacé, comme <img> ou <video>, est redimensionné pour s'adapter à son conteneur. Elle n'a aucun effet sur <iframe>, <embed> et <fencedframe>. La valeur initiale est fill.

• fill : l'objet est dimensionné pour remplir la boîte de contenu. Si le rapport d'aspect diffère, l'image est étirée.
• contain : l'objet est mis à l'échelle en conservant son rapport d'aspect pour tenir dans la boîte. En cas de différence, des bandes vides apparaissent (letterbox ou pillarbox).
• cover : l'objet conserve son rapport d'aspect et remplit toute la boîte. En cas de différence, il est rogné.
• none : l'objet n'est pas redimensionné.
• scale-down : l'objet est dimensionné comme si none ou contain était indiqué, selon ce qui donne la plus petite taille.

La position de l'image dans la boîte se règle séparément avec object-position. Cela compte aussi dans Figma. Une image cover est rognée, et object-position décide quelle partie survit.

Les quatre modes de remplissage de Figma

Figma n'a pas de type de calque pour les images. Selon le guide de Figma pour ajuster les propriétés d'une image, une image est un remplissage appliqué à une forme, un frame ou un calque de texte, avec quatre modes :

• Fill : positionne et met à l'échelle l'image pour qu'elle occupe tout le calque. Si les formes diffèrent, Figma peut rogner l'image.
• Fit : garde l'image entière visible dans le calque. Selon la forme du calque, l'image peut ne pas le remplir complètement.
• Crop : permet d'ajuster les bords de l'image pour contrôler quelle partie est visible.
• Tile : répète l'image d'origine sur le calque, avec une taille de motif exprimée en pourcentage des dimensions d'origine de l'image.

Côte à côte

La dernière colonne est une correspondance par comportement, pas une promesse sur ce qu'écrit un outil d'import. Ouvrez le panneau de remplissage du calque importé et lisez le mode réellement appliqué. Le rapport d'import d'UnHTML liste ce qui a basculé sur une solution de repli pendant l'import, et ce n'est pas un clone exact au pixel : considérez donc le panneau de remplissage comme la source de vérité.

background-size : cover, contain et auto

Quand la page utilise un arrière-plan CSS plutôt qu'un <img>, les règles viennent de background-size. La valeur initiale est auto auto.

• cover met l'image à l'échelle, en conservant son rapport, à la plus petite taille qui remplit le conteneur sans espace vide. L'image est rognée verticalement ou horizontalement si les proportions diffèrent.
• contain met l'image à l'échelle aussi grande que possible sans la rogner ni l'étirer. Si le conteneur est plus grand que l'image, elle est répétée en mosaïque, sauf si background-repeat vaut no-repeat.
• auto met à l'échelle dans cette direction en conservant les proportions intrinsèques de l'image.
• Une longueur étire l'image à cette taille. Un pourcentage est relatif à la zone de positionnement de l'arrière-plan, qui est par défaut la boîte de remplissage (padding box) et le viewport entier quand background-attachment vaut fixed.

La clause de mosaïque est celle qui pose problème. Un arrière-plan contain sur une bannière large peut se répéter dans le navigateur, et le rendu que vous attendez d'après la capture d'écran dépend de background-repeat. Dans Figma, la répétition correspond au mode Tile, dont la taille est un pourcentage des dimensions d'origine de l'image. Si vous voyez un motif répété après l'import, cherchez background-repeat dans le CSS source avant de conclure que l'import s'est trompé.

Résolution : taille intrinsèque, densité et limite de 4096 px

Taille intrinsèque

Un fichier matriciel a une largeur et une hauteur fixes en pixels. Le guide MDN sur les images adaptatives le dit clairement : une petite image matricielle paraît granuleuse quand elle est affichée plus grande que sa taille d'origine. Les bitmaps ont toujours des dimensions et des proportions intrinsèques, c'est pourquoi object-fit et background-size peuvent raisonner dessus.

srcset et densité

Les pages servent souvent des fichiers différents à des écrans différents. Avec srcset et des descripteurs x, une image affichée sur 320 pixels CSS de large peut charger un fichier de 320 px sur un écran standard et un fichier de 640 px sur un écran à deux pixels physiques par pixel CSS. Dans l'exemple de MDN, le fichier de 640 px pèse 93 Ko et celui de 320 px pèse 39 Ko. Avec srcset et sizes, le navigateur choisit le fichier d'après la largeur de l'emplacement.

C'est pourquoi une image importée peut sembler plus molle que la page en ligne. La page a peut-être choisi pour votre écran un fichier plus grand que celui vu par la capture. Quand une image paraît granuleuse après l'import, trouvez quel fichier a été capturé et sa largeur, puis comparez avec la taille du calque.

La limite de 4096 px de Figma

Selon l'article d'aide de Figma sur l'ajout d'images, Figma limite les images à 4096 x 4096 pixels. Un fichier plus grand est réduit proportionnellement pour que le plus grand côté mesure 4096 px ou moins, et certaines métadonnées du fichier peuvent être perdues. Les formats pris en charge sont JPG, PNG, HEIC, WebP, GIF et TIFF (TIFF uniquement sur Safari), en 2026.

Deux conséquences. Une très grande photo d'en-tête est réduite à l'entrée, donc le calque contient au plus 4096 px sur son grand côté. Et comme l'image est un remplissage, vous ne pouvez pas mettre l'image elle-même à l'échelle. Vous mettez à l'échelle le calque qu'elle remplit, et Figma conserve le mode de remplissage pendant ce temps.

Les arrière-plans qui ne sont pas des bitmaps

Tous les arrière-plans n'ont pas de pixels. Selon MDN, les images vectorielles comme le SVG n'ont pas forcément de dimensions intrinsèques, et les dégradés CSS n'en ont aucune, de sorte que background-size: auto se rabat sur la taille de la zone de positionnement. MDN avertit aussi que le dimensionnement des images vectorielles sans dimensions intrinsèques n'est pas entièrement implémenté dans tous les navigateurs : testez dans plusieurs. Ces cas sortent des modes de remplissage d'image. Voir comment un SVG sur une page devient des vecteurs Figma natifs et les dégradés CSS dans Figma pour les détails.

Comment vérifier une image importée

1. Sélectionnez le calque d'image et ouvrez le panneau de remplissage. Lisez le mode : Fill, Fit, Crop ou Tile.
2. Comparez-le avec le CSS. cover doit se lire Fill, contain Fit, et un arrière-plan répété Tile.
3. Si le recadrage montre la mauvaise partie, comparez object-position ou background-position avec la position du recadrage dans Figma.
4. Comparez la largeur en pixels du fichier source avec la largeur du calque. Un fichier de 320 px sur un calque de 640 px paraîtra mou.
5. Si l'image a des coins arrondis ou une bordure, vérifiez-les séparément. Border radius, bordures et contours explique ce qui survit à un import.

Conclusion

L'ajustement se transpose parce que CSS et Figma décrivent les mêmes quelques choix : couvrir, contenir, répéter. La résolution reste la question ouverte : elle dépend du fichier servi par la page et du plafond de 4096 px de Figma. Vérifiez le mode de remplissage, puis la largeur en pixels, et le reste d'une image importée se met en général en place. Si vous importez des pages régulièrement, UnHTML signale ce qui a basculé sur une solution de repli pour que vous sachiez quels calques inspecter en premier.

Questions fréquentes

object-fit: cover devient-il Fill dans Figma ?

Ils décrivent la même idée. MDN indique que cover conserve le rapport d'aspect, remplit toute la boîte et rogne l'excédent. Le mode Fill de Figma met l'image à l'échelle et la positionne pour qu'elle occupe tout le calque, et peut la rogner. Ouvrez le panneau de remplissage après l'import et confirmez le mode sur le calque.

Pourquoi une image importée paraît-elle floue ?

Une image matricielle a un nombre fixe de pixels et paraît granuleuse quand elle est affichée plus grande que sa taille d'origine. Une page peut servir un petit fichier à un écran 1x. Figma réduit aussi les fichiers de plus de 4096 x 4096 px. Vérifiez le fichier servi par la page, pas le CSS.

Quelle différence entre background-size contain et object-fit contain ?

Les deux ajustent l'image entière sans rognage. background-size: contain peut répéter l'image si la boîte est plus grande que l'image et que background-repeat n'est pas no-repeat. object-fit: contain laisse plutôt des bandes vides.

Puis-je mettre une image à l'échelle dans Figma sans modifier le calque ?

Non. Figma applique les images comme des remplissages : vous mettez à l'échelle l'objet que l'image remplit, et le mode de remplissage est conservé.