Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Ein Bild skalieren

Wenn Sie einen Bild-Block zu einer Seite oder einem Blogeintrag hinzufügen, hängt die Größe der Darstellung auf Ihrer Website von mehreren Faktoren ab:

  • Die Größe des Bild-Blocks
  • Das Layout, das Sie für den Bild-Block ausgewählt haben
  • Die Größe des Originalbilds (nur klassisches Layout)

Diese Anleitung vermittelt dir ein besseres Verständnis dieser Faktoren und erläutert zudem die verschiedenen Möglichkeiten der Bildskalierung.

Video ansehen

Bevor Sie beginnen

  • Diese Anleitung betrifft das Skalieren von Bild-Blöcken. Hierdurch hast du die Möglichkeit, Bilder zu Layout-Seiten, Blogeinträgen und sonstigen Inhaltsbereichen in Squarespace hinzuzufügen. Informationen zu anderen Bildtypen findest du unter Sonstige Bilder.
  • Wir empfehlen, Bilder mit einer Breite von 1500 bis 2500 Pixeln hochzuladen. Mit dieser Größe stellen Sie sicher, dass Bilder visuell ansprechend dargestellt werden, ohne Ihre Website zu überlasten.
  • Wenn du ein vorgefertigtes Layout mit einem Platzhalter-Bild-Block verwendest, füge dem Block ein eigenes Bild hinzu, bevor du versuchst, die Größe zu ändern.

Mit anderen Blöcken skalieren

Wenn du einen Bild-Block hinzufügst, wird dieser automatisch vergrößert, um die gesamte Breite des Inhaltsbereichs auszufüllen. Du kannst den Bild-Block verkleinern, indem du weitere Blöcke auf beiden Seiten hinzufügst. Das Seitenverhältnis (Breite : Höhe) wird beibehalten, sodass das gesamte Bild schrumpft, ohne die Form zu verändern.

Dies erreichst du am besten mit Abstands-Blöcken, die Leerräume einfügen. Füge sie links oder rechts von einem Bild-Block hinzu und bewege dann das Skalierwerkzeug, um den Bild-Block zu skalieren.

  1. Klicke auf eine Einfügemarke, um einen Abstands-Block hinzuzufügen.
  2. Ziehe den Abstands-Block auf die linke oder rechte Seite des Bild-Blocks.
  3. Klicke und ziehe das Skalierwerkzeug.

Ändere die Größe eines Bildes mithilfe eines anderen Blocks, um es zu verkleinern.

Füge Abstands-Blöcke in gleicher Größe auf beiden Seiten ein, um das Bild zu zentrieren.

Arrows_pointing_to_two_Spacer_Blocks_with_an_image_in_between_the_blocks.jpg

Andere Blöcke

Dieselbe Methode empfiehlt sich auch für andere Blöcke. Dies ist besonders hilfreich, wenn Text neben Bildern erscheinen soll, wie etwa im .gif unten dargestellt.

Resizing_an_Image_Block_using_a_Text_Block.gif

Das ursprüngliche Bild zuschneiden

Durch das Zuschneiden kann die Höhe und Form eines Bildes geändert werden, da Teile des Bildes entfernt werden.

Verwende zum Zuschneiden des Originalbildes den integrierten Bild-Editor, wie in der Abbildung unten gezeigt, oder verwende deine eigene Drittanbieter-Software und lade das Bild erneut hoch.

Tipp: Normalerweise behält das zugeschnittene Bild auf deiner Website seine Breite bei. Verwende eine der anderen Methoden in dieser Anleitung, um die Breite zu verändern.

image_editor_-_example_crop.jpg

Das Zuschneidewerkzeug verwenden

Bei den Layouts Inline (Klassisch) und Poster besteht die Möglichkeit, das Zuschneidewerkzeug anzuklicken und zu ziehen, um das Bild vertikal zuzuschneiden. In diesem Fall behält das Bild die ursprüngliche Breite, nur die Höhe wird verändert.

  1. Klicke auf den Bild-Block. Es erscheint ein Rand mit einem runden Zuschneidewerkzeug am unteren Ende.
  2. Klicke und ziehe das Zuschneidewerkzeug, um das Bild zuzuschneiden.

Tipps:

  • Halte die Umschalttaste gedrückt, während du das Zuschneidewerkzeug ziehst, um das Bild in 20-Pixel-Schritten zu skalieren. Auf diese Weise kannst du die Unterseite des Bildes an einem anderen Block ausrichten.
  • Das Zuschneidewerkzeug erscheint erst, nachdem du ein Bild hinzugefügt hast.
  • Du kannst den Mittelpunkt des zugeschnittenen Bildes mit Bildausschnitten festlegen.
  • Doppelklicke auf das Zuschneidewerkzeug, um den Zuschnitt rückgängig zu machen.
  • Ziehen Sie das Werkzeug nach unten, um das Bild mittels Zoom zu vergrößern.

Decreasing_the_height_of_an_image_using_the_cropping_handle.gif

Klicke und ziehe das Zuschneidewerkzeug nach unten, um das Bild horizontal zuzuschneiden. Auf diesem Weg vergrößerst du das Bild und trennst die Seiten ab.

Dragging_the_cropping_handle_down_to_horizontally_crop_an_image.gif

Die Größe mit Bild-Block-Stilen ändern

Die Layouts KarteÜberlappung und Collage verfügen in ihren jeweiligen Stil-Einstellungen über eine eigene Skalierungsoption.

  1. Öffne Website-Stile, während du eine Seite bearbeitest, und klicke dann auf Bild-Blöcke.
  2. Scrolle zum Abschnitt für dieses Layout. (Scrolle beispielsweise zum Abschnitt Bild-Block: Karte.)
  3. Verwende die Anpassung Bildbreite, um die Größe zu ändern. Bildtext wird je nach verfügbarem Platz automatisch angepasst.
  4. Klicke auf Speichern.
  1. Klicken Sie im Hauptmenü auf Design und anschließend auf Website-Stil.
  2. Scrolle zum Abschnitt für dieses Layout. (Scrolle beispielsweise zum Abschnitt Bild-Block: Karte.)
  3. Verwenden Sie die Anpassung Image Width (Bildbreite), um die Größe zu ändern. Bildtext wird je nach verfügbarem Platz automatisch vergrößert oder verkleinert.
  4. Klicke auf Speichern.
Tipp: Dies beeinflusst alle Bild-Blöcke mit diesem Layout.

Den Block zum Füllen strecken

Wenn du das Inline-Layout verwendest und dein Bild schmaler als der Bild-Block ist, behält das Bild seine ursprüngliche Breite bei. Du siehst Leerräume auf beiden Seiten des Bildes innerhalb des Blocks. Auf diesem Weg wird die ursprüngliche Bildqualität beibehalten.

So füllst du die Leerräume aus und lässt das Bild die gesamte Breite des Blocks einnehmen:

  1. Öffne den Bild-Block und klicke auf Design.
  2. Aktiviere den Schalter Strecken.

Tipps:

  • Das Strecken eines Bildes kann sich auf die Bildqualität auswirken.
  • Wir empfehlen, Bilder mit einer Breite von 1500 bis 2500 Pixeln hochzuladen, damit Bilder nicht unnötig gestreckt werden müssen.
  • Wenn das Bild breiter als der Bereich des Bild-Blocks ist, wird es entsprechend verkleinert (nicht zugeschnitten).
  • Die anderen Layouts werden automatisch gestreckt.

Arrow_pointing_to_the_Stretch_setting_in_the_Inline_Image_Block.jpg

Optionen nach Layout

Hier sehen Sie eine Kurzübersicht der verschiedenen Optionen, die in den unterschiedlichen Layouts zur Verfügung stehen:

Option Inline Poster Card (Karte) Overlap (Überhang) Collage Stack (Stapel)
Mit Blöcken skalieren
Das ursprüngliche Bild zuschneiden
Zuschneidewerkzeug
Website-Stil

Zum Füllen strecken entf. entf. entf. entf. entf.

Sonstige Bilder

Sie haben weitere Möglichkeiten, Bilder zu Ihrer Website hinzuzufügen. Dabei stehen Ihnen jeweils eigene Skalierungsoptionen zur Verfügung:

Tipp: Die Methode zur Skalierung mit anderen Blöcken kann für jeden beliebigen Block angewendet werden.
War dieser Beitrag hilfreich?
161 von 606 fanden dies hilfreich