Bild mit Balken einpassen
Passen Sie ein Bild ohne Beschneiden oder Strecken in eine feste Fläche ein: Ein Foto mit 1920 mal 1080 Pixeln wird in einem Quadrat von 1000 mal 1000 zu 1000 mal 562, mit Balken von 219 Pixeln oben und unten. Kostenlos in Ihrem Browser.
- Kostenlos
- Läuft in Ihrem Browser
- Ohne Anmeldung
- Ihre Daten bleiben auf Ihrem Gerät
Im Browser ausführen – kostenlos
Rechenbeispiel
- Quellbreite
- 1.920
- Quellhöhe
- 1.080
- Leinwandbreite
- 1.000
- Leinwandhöhe
- 1.000
- Skala
- 0,5208333333
- Fit
- letterbox
Passen Sie ein Bild in eine feste Leinwand ein, ohne zu raten, zu verzerren oder Inhalte abzuschneiden. Geben Sie Quellbreite und -höhe sowie die Zielmaße an, um den einheitlichen Maßstab, die endgültige Pixelgröße und die genauen Balken oben, rechts, unten und links zu erhalten. Das Ergebnis unterscheidet horizontale Balken, vertikale Balken und eine exakte Übereinstimmung des Seitenverhältnisses und eignet sich für Videos, Präsentationen, Bildverarbeitung und responsive Vorschauen.
Bewahren Sie das vollständige Bild und seine Form
Bei einer Einpassung nach dem Contain-Prinzip bleibt jeder Quellpixel innerhalb der Zielleinwand sichtbar. Der Rechner vergleicht die Seitenverhältnisse, wählt den kleineren horizontalen oder vertikalen Skalierungsfaktor und wendet genau diesen Faktor auf beide Abmessungen an. Kreise bleiben dadurch rund, Gesichter werden nicht gestaucht und kein Teil des Motivs wird abgeschnitten.
Die ausgegebene Breite und Höhe sind ganzzahlige Pixelwerte, die die Leinwand nicht überschreiten. Liegt eine proportionale Abmessung zwischen zwei Pixeln, füllt die begrenzende Achse ihren Rand, während die andere abgerundet wird. Ein Aufrunden könnte eine Zeile oder Spalte außerhalb der Leinwand platzieren.
Zusätzlich enthält die Antwort den mathematischen Maßstab vor der Pixelrundung, damit Sie Grafiksoftware konfigurieren oder mehrere Zielformate vergleichen können. Alle vier Maße müssen positive Ganzzahlen sein. Null besitzt kein verwendbares Seitenverhältnis und wird deshalb als ungültige Eingabe zurückgewiesen, statt ein unendliches oder undefiniertes Ergebnis zu erzeugen.
Verstehen Sie horizontale und vertikale Balken
Das Balkenobjekt nennt den Abstand oben, rechts, unten und links in Pixeln. Ein breites Bild in einer relativ hohen Leinwand lässt vertikalen Raum und erhält Balken oberhalb und unterhalb. Ein hohes oder schmales Bild in einer relativ breiten Leinwand lässt horizontalen Raum, sodass Balken links und rechts entstehen.
Stimmen die Seitenverhältnisse überein, ist die Einpassung exakt und alle vier Werte sind null. Das Bild wird immer zentriert. Bei einer geraden Zahl freier Pixel sind gegenüberliegende Balken gleich groß.
Bei einer ungeraden Zahl erhält oben oder links den kleineren Anteil und unten oder rechts das verbleibende Pixel. Diese deterministische Regel sorgt dafür, dass Bild und Balken die Leinwandmaße exakt ergeben, und vermeidet mehrdeutige halbe Pixel. Sie können die Werte direkt als Innenabstände, Versätze oder Zeichenkoordinaten verwenden: Der Bildursprung liegt am linken und oberen Versatz, das eingepasste Rechteck endet vor dem rechten und unteren Balken.
Nutzen Sie das Ergebnis in Medienabläufen
Verwenden Sie die Werte vor der Größenänderung und nicht erst nach dem Export. Erstellen oder wählen Sie die Zielleinwand, skalieren Sie die Quelle mit Ihrem gewünschten Resampling-Verfahren auf die ausgegebene Breite und Höhe und positionieren Sie sie am linken und oberen Versatz. Füllen Sie den übrigen Bereich mit einer Vollfarbe, Transparenz, einer unscharfen Erweiterung oder einem anderen Hintergrund.
Die Berechnung untersucht keine Bilddaten, wählt keine Farbe und führt kein Resampling aus; sie liefert reine Geometrie unabhängig von Dateiformat und Rendering-Bibliothek. Prüfen Sie bei Stapelprozessen die Maße frühzeitig und speichern Sie das Ergebnis mit dem Renderauftrag, damit alle Stufen dieselbe Geometrie verwenden. Gleiche Eingaben erzeugen stets dieselben Maße und Balkenpositionen.
Anwendungsfälle
Videoframes vorbereiten
Passen Sie Material oder Standbilder in eine feste Auflösung ein und ermitteln Sie vor dem Kodieren die Balken.
Vorschauen ohne Beschnitt erstellen
Zentrieren Sie Produktbilder, Portfolios oder Dokumente in einheitlichen Karten, ohne Inhalt zu entfernen.
Präsentationen planen
Berechnen Sie Bildrechteck und ausgeglichene Abstände für Folien, Digital Signage und Displays.
Häufige Fragen
Was kostet die Berechnung?
Im Browser können Sie die Berechnung auch kostenlos ausführen.
Wird das Bild beschnitten oder verzerrt?
Nein. Ein einheitlicher Maßstab erhält das gesamte Bild; Balken füllen den freien Raum.
Warum unterscheiden sich gegenüberliegende Balken manchmal um ein Pixel?
Eine ungerade freie Fläche lässt sich nicht gleichmäßig in ganze Pixel teilen. Das Zusatzpixel liegt rechts oder unten.
Was geschieht bei bereits gleichen Seitenverhältnissen?
Die Einpassung gilt als exakt, das Bild füllt die Leinwand und alle Balken sind null.
Kann ich für ein unbekanntes Maß null angeben?
Nein. Jedes Maß muss eine positive Ganzzahl sein, da null kein gültiges Seitenverhältnis definiert.
Ändert diese Funktion die Größe einer Bilddatei?
Nein. Sie berechnet nur die Geometrie. Nutzen Sie Größe und Versätze in einem Renderer Ihrer Wahl.
Was passiert, wenn Bild und Fläche dasselbe Seitenverhältnis haben?
Dann passt das Bild exakt, und alle vier Balken sind null. Das Bild füllt die Fläche vollständig aus, ohne dass etwas beschnitten oder verzerrt wird.
Verwandte Tools
Für Entwickler — API-Zugang
Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.
Endpunkt
Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.
Aufruf aus Ihrem Stack
curl -X POST https://api.kit.forhosting.com/image/letterbox-fit \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"source_width":1920,"source_height":1080,"canvas_width":1000,"canvas_height":1000}'const res = await fetch("https://api.kit.forhosting.com/image/letterbox-fit", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"source_width": 1920,
"source_height": 1080,
"canvas_width": 1000,
"canvas_height": 1000
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/letterbox-fit",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"source_width": 1920,
"source_height": 1080,
"canvas_width": 1000,
"canvas_height": 1000
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/letterbox-fit", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"source_width":1920,"source_height":1080,"canvas_width":1000,"canvas_height":1000}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"source_width":1920,"source_height":1080,"canvas_width":1000,"canvas_height":1000}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/letterbox-fit", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"source_width": 1920,
"source_height": 1080,
"canvas_width": 1000,
"canvas_height": 1000
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.letterbox_fit",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.
Preis
Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.
Limits
max_mb | 15 |
max_megapixels | 12 |
Fehler
| HTTP | Code | Bedeutung |
|---|---|---|
401 | unauthorized | Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer). |
402 | insufficient_balance | Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht. |
404 | unknown_type | Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog. |
429 | rate_limited | Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt. |
Technische Hinweise
Nutzen Sie das Ergebnis in Medienabläufen
Daher eignet sie sich für CSS, Canvas, SVG, FFmpeg, ImageMagick, mobile API, Präsentationen oder Thumbnail-Aufträge. Eine API-Anfrage kostet $0.002; dieselbe deterministische Berechnung kann im Browser laufen.