CSS object-fit in Figma: Wie Bildanpassung, background-size und Auflösung übernommen werden

Kurze Antwort: Die Anpassung passt, die Auflösung nicht

CSS object-fit und background-size beschreiben dieselben Entscheidungen wie die Bildfüllmodi von Figma: das Bild so skalieren, dass es die Box ausfüllt, so skalieren, dass es in die Box passt, oder es wiederholen. Die Namen unterscheiden sich, das Verhalten stimmt aber weitgehend überein. Bei der Auflösung sieht es anders aus. Eine CSS-Regel sagt nichts darüber, wie viele Pixel die Datei enthält. Ein scharfes Bild auf der Seite kann also unscharf in Figma ankommen.

Diese Referenz behandelt die fünf object-fit-Werte, die Schlüsselwörter von background-size, die vier Füllmodi von Figma und die Auflösungsregeln, die darüber entscheiden, ob ein importiertes Bild stimmt. Sie richtet sich an Designerinnen und Designer, die eine importierte Seite öffnen und wissen müssen, was sie an jeder Bildebene prüfen sollen.

object-fit und die Füllmodi von Figma

Die fünf object-fit-Werte

Laut MDN-Referenz zu object-fit legt die Eigenschaft fest, wie der Inhalt eines ersetzten Elements, etwa <img> oder <video>, an seinen Container angepasst wird. Auf <iframe>, <embed> und <fencedframe> hat sie keine Wirkung. Der Anfangswert ist fill.

• fill: Das Objekt füllt die Inhaltsbox aus. Weicht das Seitenverhältnis ab, wird das Bild gestreckt.
• contain: Das Objekt wird unter Beibehaltung des Seitenverhältnisses so skaliert, dass es in die Box passt. Bei Abweichung entstehen leere Streifen (Letterbox oder Pillarbox).
• cover: Das Objekt behält sein Seitenverhältnis und füllt die gesamte Box. Bei Abweichung wird es beschnitten.
• none: Das Objekt wird nicht in der Größe verändert.
• scale-down: Das Objekt wird so dimensioniert, als wäre none oder contain gesetzt, je nachdem, was die kleinere Größe ergibt.

Wo das Bild in der Box sitzt, steuert separat object-position. Das spielt auch in Figma eine Rolle. Ein cover-Bild wird beschnitten, und object-position entscheidet, welcher Teil erhalten bleibt.

Die vier Füllmodi von Figma

Figma kennt keinen eigenen Ebenentyp für Bilder. Laut Figmas Anleitung zum Anpassen von Bildeigenschaften ist ein Bild eine Füllung auf einer Form, einem Frame oder einer Textebene, und es gibt vier Modi:

• Fill: Positioniert und skaliert das Bild so, dass es die gesamte Ebene ausfüllt. Unterscheiden sich die Formen, kann Figma das Bild beschneiden.
• Fit: Hält das gesamte Bild innerhalb der Ebene sichtbar. Je nach Form der Ebene füllt das Bild sie möglicherweise nicht ganz aus.
• Crop: Lässt dich die Begrenzungslinien des Bildes anpassen, um zu steuern, welcher Teil sichtbar ist.
• Tile: Wiederholt das Originalbild über die Ebene, mit einer Kachelgröße als Prozentwert der ursprünglichen Bildabmessungen.

Gegenüberstellung

Die letzte Spalte ordnet nach Verhalten zu und ist kein Versprechen darüber, was ein Importer tatsächlich schreibt. Öffne das Füllungspanel der importierten Ebene und lies den Modus ab, der wirklich gesetzt ist. Der Importbericht von UnHTML listet auf, was beim Import auf eine Ausweichlösung zurückgefallen ist, und er ist kein pixelgenauer Klon. Behandle das Füllungspanel deshalb als maßgebliche Quelle.

background-size: cover, contain und auto

Nutzt die Seite einen CSS-Hintergrund statt eines <img>, stammen die Regeln aus background-size. Der Anfangswert ist auto auto.

• cover skaliert das Bild unter Beibehaltung des Verhältnisses auf die kleinste Größe, die den Container ohne leeren Raum füllt. Weichen die Proportionen ab, wird das Bild vertikal oder horizontal beschnitten.
• contain skaliert das Bild so groß wie möglich, ohne es zu beschneiden oder zu strecken. Ist der Container größer als das Bild, wird das Bild gekachelt, außer background-repeat ist no-repeat.
• auto skaliert in der jeweiligen Richtung unter Beibehaltung der intrinsischen Proportionen.
• Eine Länge streckt das Bild auf diese Größe. Ein Prozentwert bezieht sich auf den Positionierungsbereich des Hintergrunds, standardmäßig die Padding-Box, bei background-attachment: fixed der gesamte Viewport.

Die Kachelregel ist die, die Ärger macht. Ein contain-Hintergrund auf einem breiten Banner kann sich im Browser wiederholen, und das Design, das du aus dem Screenshot erwartest, hängt von background-repeat ab. In Figma ist die Wiederholung der Modus Tile, und seine Größe ist ein Prozentwert der ursprünglichen Bildabmessungen. Siehst du nach dem Import ein Wiederholungsmuster, such im Quell-CSS nach background-repeat, bevor du annimmst, der Import sei fehlerhaft.

Auflösung: intrinsische Größe, Pixeldichte und das 4096-px-Limit

Intrinsische Größe

Eine Rasterdatei hat eine feste Breite und Höhe in Pixeln. MDNs Leitfaden zu responsiven Bildern sagt es klar: Ein kleines Rasterbild wirkt körnig, wenn es größer als seine Originalgröße dargestellt wird. Bitmaps haben immer intrinsische Abmessungen und Proportionen, deshalb können object-fit und background-size mit ihnen rechnen.

srcset und Pixeldichte

Seiten liefern oft unterschiedliche Dateien an unterschiedliche Bildschirme. Mit srcset und x-Deskriptoren kann ein Bild, das 320 CSS-Pixel breit angezeigt wird, auf einem Standarddisplay eine 320-px-Datei laden und auf einem Bildschirm mit zwei Geräte-Pixeln pro CSS-Pixel eine 640-px-Datei. In MDNs Beispiel ist die 640-px-Datei 93 KB groß, die 320-px-Datei 39 KB. Mit srcset und sizes wählt der Browser die Datei anhand der Breite des verfügbaren Platzes.

Deshalb kann ein importiertes Bild weicher wirken als die Live-Seite. Möglicherweise hat die Seite für deinen Bildschirm eine größere Datei gewählt als die, die der Import gesehen hat. Wirkt ein Bild nach dem Import körnig, finde heraus, welche Datei erfasst wurde und wie breit sie ist, und vergleiche das mit der Größe der Ebene.

Figmas 4096-px-Limit

Laut Figmas Hilfeartikel zum Hinzufügen von Bildern begrenzt Figma Bilder auf 4096 x 4096 Pixel. Eine größere Datei wird proportional verkleinert, sodass die längste Seite höchstens 4096 px misst, und dabei können Datei-Metadaten verloren gehen. Unterstützte Formate sind JPG, PNG, HEIC, WebP, GIF und TIFF (TIFF nur in Safari), Stand 2026.

Daraus folgen zwei Dinge. Ein sehr großes Titelbild wird beim Import verkleinert, die Ebene enthält also höchstens 4096 px an der langen Seite. Und weil das Bild eine Füllung ist, kannst du das Bild selbst nicht skalieren. Du skalierst die Ebene, die es füllt, und Figma behält dabei den Füllmodus bei.

Hintergründe, die keine Bitmaps sind

Nicht jeder Hintergrund besteht aus Pixeln. Laut MDN haben Vektorbilder wie SVG nicht zwingend intrinsische Abmessungen, und CSS-Verläufe haben keine, sodass background-size: auto auf die Größe des Positionierungsbereichs zurückfällt. MDN warnt außerdem, dass die Größenberechnung für Vektorbilder ohne intrinsische Abmessungen nicht in allen Browsern vollständig umgesetzt ist, teste also in mehr als einem. Diese Fälle verlassen die Bildfüllmodi. Details findest du unter wie SVG auf einer Seite zu nativen Figma-Vektoren wird und CSS-Verläufe in Figma.

So prüfst du ein importiertes Bild

1. Wähle die Bildebene und öffne das Füllungspanel. Lies den Modus ab: Fill, Fit, Crop oder Tile.
2. Vergleiche ihn mit dem CSS. cover sollte als Fill erscheinen, contain als Fit und ein sich wiederholender Hintergrund als Tile.
3. Zeigt der Ausschnitt den falschen Teil, vergleiche object-position oder background-position mit der Crop-Position in Figma.
4. Vergleiche die Pixelbreite der Quelldatei mit der Breite der Ebene. Eine 320-px-Datei auf einer 640-px-Ebene wirkt weich.
5. Hat das Bild abgerundete Ecken oder einen Rahmen, prüfe diese getrennt. Border Radius, Rahmen und Outlines beschreibt, was einen Import übersteht.

Fazit

Das Anpassungsverhalten wird übernommen, weil CSS und Figma dieselben wenigen Optionen beschreiben: abdecken, einpassen, wiederholen. Die Auflösung bleibt die offene Frage: Sie hängt von der Datei ab, die die Seite geliefert hat, und von Figmas Obergrenze von 4096 px. Prüfe den Füllmodus und dann die Pixelbreite, dann passt der Rest eines importierten Bildes meist. Wenn du regelmäßig Seiten importierst, meldet UnHTML, was auf eine Ausweichlösung zurückgefallen ist, damit du weißt, welche Ebenen du zuerst prüfen solltest.

Häufige Fragen

Wird object-fit: cover in Figma zu Fill?

Sie beschreiben dieselbe Idee. MDN sagt, cover behält das Seitenverhältnis, füllt die ganze Box und beschneidet den Überstand. Figmas Fill-Modus skaliert und positioniert das Bild so, dass es die gesamte Ebene ausfüllt, und kann es beschneiden. Öffne nach dem Import das Füllungspanel und bestätige den Modus an der Ebene.

Warum wirkt ein importiertes Bild unscharf?

Ein Raster hat eine feste Pixelzahl und wirkt körnig, wenn es größer als seine Originalgröße dargestellt wird. Eine Seite kann einem 1x-Bildschirm eine kleine Datei liefern. Figma verkleinert außerdem Dateien über 4096 x 4096 px. Prüfe die Datei, die die Seite geliefert hat, nicht das CSS.

Was ist der Unterschied zwischen background-size contain und object-fit contain?

Beide passen das ganze Bild ohne Beschnitt ein. background-size: contain kann kacheln, wenn die Box größer als das Bild ist und background-repeat nicht no-repeat ist. object-fit: contain lässt stattdessen leere Streifen.

Kann ich ein Bild in Figma skalieren, ohne die Ebene zu ändern?

Nein. Figma wendet Bilder als Füllungen an, du skalierst also das Objekt, das das Bild füllt, und der Füllmodus bleibt erhalten.