Skalierung von SVG-Hintergründen

Der Algorithmus zur Bestimmung der Hintergrundgröße eines Hintergrundbildes lässt sich größtenteils durch diese vier Regeln zusammenfassen. Es gibt einige Ausnahmefälle, die von diesen Regeln nicht abgedeckt werden, aber sie decken die Mehrheit der Fälle ab.

1. Wenn background-size eine feste Dimension angibt (d.h. Prozentsätze und relative Einheiten werden durch ihren Kontext festgelegt), gewinnt diese Dimension.
2. Wenn das Bild ein intrinsisches Verhältnis hat (d.h. sein Breite:Höhe-Verhältnis konstant ist, wie z.B. 16:9, 4:3, 2.39:1, 1:1 und so weiter), wird die gerenderte Größe dieses Verhältnis beibehalten.
3. Wenn das Bild eine Größe angibt und die Größe nicht durch constrain oder cover modifiziert wird, gewinnt die angegebene Größe.
4. Wenn keiner der oben genannten Fälle zutrifft, wird das Bild in derselben Größe wie der Hintergrundbereich gerendert.

Es ist wichtig zu beachten, dass der Hintergrund-Skalierungsalgorithmus nur die Dimensionen und Proportionen eines Bildes berücksichtigt oder deren Fehlen. Ein SVG-Bild mit festen Dimensionen wird genauso behandelt wie ein Rasterbild derselben Größe.

Bevor Sie sich ansehen, wie verschiedene Arten von SVG-Quellbildern mit background-size aussehen, ist es hilfreich, sich einige Beispiel-Quellbilder mit unterschiedlichen Dimensionen und Größeneinstellungen anzusehen, die wir später als unsere background-image Werte in unseren Beispielen verwenden werden. Der Browser rendert <svg>-Bilder standardmäßig 300px breit und 150px hoch.

Dieses SVG-Gradientenbild ist sowohl dimensionslos als auch proportionslos. Es ist egal, in welcher Größe es vorliegt, und es muss kein bestimmtes Seitenverhältnis beibehalten werden. Dies wäre ein guter Gradient für einen Desktop-Hintergrund, der unabhängig von der Bildschirmgröße und dem Verhältnis funktionieren würde.

<svg>
  <title>Corner-to-corner gradient</title>
  <defs>
    <linearGradient id="g" x1="0%" x2="100%" y1="0%" y2="100%">
      <stop style="stop-color:pink" offset="0" />
      <stop style="stop-color:goldenrod" offset="1" />
    </linearGradient>
  </defs>
  <rect style="fill: url(#g)" width="100%" height="100%" />
</svg>

Dieses Bild gibt eine Breite von 100 Pixeln an, aber keine Höhe oder ein intrinsisches Verhältnis. Es ist sozusagen ein dünner Tapetenstreifen, der über die gesamte Höhe eines Blocks gestreckt werden könnte.

<svg width="100">
  <title>Vertical gradient, with a fixed width</title>
  <defs>
    <linearGradient id="g" x1="0%" x2="0%" y1="0%" y2="100%">
      <stop style="stop-color: purple;" offset="0" />
      <stop style="stop-color: lime;" offset="1" />
    </linearGradient>
  </defs>
  <rect style="fill: url(#g);" width="100%" height="100%" />
</svg>

Dieses Bild gibt eine Höhe von 100 Pixeln an, aber keine Breite. Es gibt auch ein intrinsisches Seitenverhältnis von 3:4 an. Dies stellt sicher, dass das Breite:Höhe-Verhältnis immer 3:4 ist, es sei denn, es wird absichtlich auf eine unverhältnismäßige Größe skaliert (d.h. indem explizit sowohl Breite als auch Höhe angegeben werden, die nicht diesem Verhältnis entsprechen).

Dies ist sehr ähnlich wie die Angabe einer bestimmten Breite und Höhe, da Sie, sobald Sie eine Dimension und ein Verhältnis haben, die andere Dimension impliziert ist.

<svg height="100" viewBox="0 0 3 4" preserveAspectRatio="none">
  <title>Vertical gradient, with a fixed height and intrinsic ratio</title>
  <defs>
    <linearGradient id="g" x1="0%" x2="0%" y1="0%" y2="100%">
      <stop style="stop-color: teal;" offset="0" />
      <stop style="stop-color: orange;" offset="1" />
    </linearGradient>
  </defs>
  <rect style="fill: url(#g);" width="100%" height="100%" />
</svg>

Dieses Bild gibt weder eine Breite noch eine Höhe an; stattdessen gibt es ein intrinsisches Verhältnis von 1:1 an. Es ist immer quadratisch und kann in jeder Größe verwendet werden, z.B. 32x32, 128x128 oder 512x512.

<svg viewBox="0 0 1 1" preserveAspectRatio="none">
  <title>Intrinsic ratio</title>
  <defs>
    <linearGradient id="g" x1="0%" x2="100%" y1="0%" y2="0%">
      <stop style="stop-color: navy;" offset="0" />
      <stop style="stop-color: maroon;" offset="1" />
    </linearGradient>
  </defs>
  <rect style="fill: url(#g);" width="100%" height="100%" />
</svg>

Nun lassen Sie uns einige Beispiele sehen, was passiert, wenn wir unterschiedliche Skalierungen auf diese Bilder anwenden. In jedem der unten stehenden Beispiele sind die umgebenden <div> Elemente 300 Pixel breit und 200 Pixel hoch, mit einem 2 Pixel breiten Rand. Um sicherzustellen, dass wir das SVG-Hintergrundbild nur einmal für diese Demonstrationen darstellen, setzen wir background-repeat auf no-repeat.

div {
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  border: 2px solid black;
}

Wenn Sie background-size verwenden, um feste Längen für beide Dimensionen anzugeben, werden diese Längen immer verwendet, gemäß Regel 1 oben. Mit anderen Worten, das Bild wird immer auf die von Ihnen angegebenen Abmessungen gestreckt, unabhängig davon, ob das Quellbild seine Dimensionen und/oder sein Seitenverhältnis angegeben hat oder nicht.

Keine Dimensionen oder intrinsisches Verhältnis

In diesem Beispiel hat das Bild keine Dimensionen oder ein intrinsisches Verhältnis:

<div></div>

div {
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  border: 2px solid black;
}

div {
  background-image: url(no-dimensions-or-ratio.svg);
  background-size: 125px 175px;
}

Eine angegebene Dimension, kein intrinsisches Verhältnis

In diesem Beispiel hat das Bild eine Dimension angegeben, aber kein intrinsisches Verhältnis:

<div></div>

div {
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  border: 2px solid black;
}

div {
  background-image: url(100px-wide-no-height-or-ratio.svg);
  background-size: 250px 150px;
}

Eine angegebene Dimension mit intrinsischem Verhältnis

<div></div>

In diesem Beispiel hat das Bild eine Dimension ausdrücklich festgelegt, zusammen mit einem intrinsischen Verhältnis, was bedeutet, dass beide Dimensionen effektiv definiert sind. Eine absolute Höhe und Breite für background-size festzulegen, überschreibt die in der SVG festgelegten Dimensionen:

div {
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  border: 2px solid black;
}

div {
  background-image: url(100px-height-3x4-ratio.svg);
  background-size: 275px 125px;
}

Keine angegebene Breite oder Höhe mit intrinsischem Verhältnis

In diesem Beispiel hat das Bild ein intrinsisches Verhältnis, aber keine Dimensionen festgelegt:

<div></div>

div {
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  border: 2px solid black;
}

div {
  background-image: url(no-dimensions-1x1-ratio.svg);
  background-size: 250px 100px;
}

Die Angabe von cover für background-size macht das Bild so klein wie möglich, während es immer noch den gesamten Hintergrundbereich abdeckt. contain hingegen macht das Bild so groß wie möglich, ohne vom Hintergrundbereich abgeschnitten zu werden.

Für ein Bild mit einem intrinsischen Verhältnis passt genau eine Größe für die cover/fit-Kriterien allein. Wenn jedoch kein intrinsisches Verhältnis angegeben ist, reichen cover/fit nicht aus, sodass die großen/kleinen Einschränkungen die resultierende Größe bestimmen.

Keine Dimensionen oder intrinsisches Verhältnis

In diesem Beispiel hat das Bild keine Dimensionen oder ein intrinsisches Verhältnis festgelegt. Wenn ein Bild keine Dimensionen oder ein intrinsisches Verhältnis angibt, gelten weder Regel 2 noch Regel 3, sodass Regel 4 greift: Das Hintergrundbild wird über den gesamten Hintergrundbereich gerendert. Dies erfüllt die größten-oder-kleinsten Einschränkungen.

<div></div>

div {
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  border: 2px solid black;
}

div {
  background-image: url(no-dimensions-or-ratio.svg);
  background-size: contain;
}

Eine angegebene Dimension, kein intrinsisches Verhältnis

In diesem Beispiel, bei dem das Bild eine Dimension hat, aber kein intrinsisches Verhältnis, gilt Regel 4 und das Bild wird angepasst, um den gesamten Hintergrundbereich zu bedecken.

<div></div>

div {
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  border: 2px solid black;
}

div {
  background-image: url(100px-wide-no-height-or-ratio.svg);
  background-size: contain;
}

Eine angegebene Dimension mit intrinsischem Verhältnis

In diesen Beispielen hat das Bild eine Dimension ausdrücklich festgelegt, zusammen mit einem intrinsischen Verhältnis.

Die Dinge ändern sich, wenn Sie ein intrinsisches Verhältnis angeben. In diesem Fall ist Regel 1 nicht relevant, also wird Regel 2 angewendet: Wir versuchen, jedes intrinsische Verhältnis zu bewahren (unter Beachtung von contain oder cover). Zum Beispiel bedeutet die Erhaltung eines 3:4-intrinsischen Seitenverhältnisses für eine 300x200-Box mit contain, ein 150x200-Hintergrund zu zeichnen.

Fall "contain"

<div></div>

Angesichts dieses CSS:

div {
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  border: 2px solid black;
}

div {
  background-image: url(100px-height-3x4-ratio.svg);
  background-size: contain;
}

Beachten Sie, wie das gesamte Bild gerendert wird und so gut wie möglich in die Box passt, ohne dass ein Teil davon abgeschnitten wird.

Fall "cover"

<div></div>

div {
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  border: 2px solid black;
}

div {
  background-image: url(100px-height-3x4-ratio.svg);
  background-size: cover;
}

Hier wird das 3:4-Verhältnis beibehalten, während das Bild trotzdem über die gesamte Box gestreckt wird. Dadurch wird der untere Teil des Bildes abgeschnitten.

Keine Dimensionen mit intrinsischem Verhältnis

Diese Beispiele verwenden das Bild mit einem intrinsischen Verhältnis, aber ohne definierte Dimensionen. Wenn Sie ein Bild mit keinen intrinsischen Dimensionen, aber einem intrinsischen Verhältnis verwenden, funktionieren die Dinge ähnlich.

Fall "contain"

<div></div>

div {
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  border: 2px solid black;
}

div {
  background-image: url(no-dimensions-1x1-ratio.svg);
  background-size: contain;
}

Beachten Sie, dass das Bild so dimensioniert ist, dass die kleinste Dimension passt, während das 1:1-Verhältnis beibehalten wird.

Fall "cover"

<div></div>

div {
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  border: 2px solid black;
}

div {
  background-image: url(no-dimensions-1x1-ratio.svg);
  background-size: cover;
}

Hier wird das Bild so dimensioniert, dass es die größte Dimension füllt. Das 1:1-Verhältnis wurde beibehalten, obwohl dies bei diesem Quellbild schwer zu erkennen ist.

Wenn background-size auf auto oder auto auto gesetzt ist, besagt Regel 2, dass das Rendering jedes angegebene intrinsische Verhältnis bewahren muss.

Keine Dimensionen oder intrinsisches Verhältnis

Wenn Hintergrundbilder automatisch skaliert werden, ohne dass ein intrinsisches Verhältnis oder Dimensionen angegeben sind, tritt Regel 4 in Kraft und das Bild wird so gerendert, dass es den Hintergrundbereich ausfüllt.

<div></div>

div {
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  border: 2px solid black;
}

div {
  background-image: url(no-dimensions-or-ratio.svg);
  background-size: auto auto;
}

Eine Dimension und kein intrinsisches Verhältnis

Wenn kein intrinsisches Verhältnis angegeben ist, aber wenigstens eine Dimension, greift Regel 3 und wir rendern das Bild entsprechend diesen Dimensionen.

<div></div>

div {
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  border: 2px solid black;
}

div {
  background-image: url(100px-wide-no-height-or-ratio.svg);
  background-size: auto auto;
}

Beachten Sie hier, dass die Breite, die im Quell-SVG auf 100 Pixel festgelegt ist, beachtet wird, während die Höhe den Hintergrundbereich ausfüllt, da sie nicht angegeben ist (weder explizit noch durch ein intrinsisches Verhältnis).

Eine Dimension und ein intrinsisches Verhältnis

Wenn wir ein intrinsisches Verhältnis mit einer festen Dimension haben, werden beide Dimensionen fixiert. Wie zuvor erwähnt, bedeutet das Wissen um eine Dimension und ein Verhältnis dasselbe wie die explizite Angabe beider Dimensionen.

<div></div>

div {
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  border: 2px solid black;
}

div {
  background-image: url(100px-height-3x4-ratio.svg);
  background-size: auto auto;
}

Da dieses Bild eine explizite Höhe von 100px hat. Mit dem 3:4-Verhältnis, das im SVG festgelegt ist, beträgt die Breite des Bildes im Fall von auto 75 Pixel.

Keine festen Dimensionen mit intrinsischem Verhältnis

Wenn ein intrinsisches Verhältnis angegeben ist, aber keine Dimensionen, wird Regel 4 angewendet — außer dass Regel 2 auch gilt. Das Bild wird daher genauso gerendert wie im Fall contain.

<div></div>

div {
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  border: 2px solid black;
}

div {
  background-image: url(no-dimensions-1x1-ratio.svg);
  background-size: auto auto;
}

Gemäß Regel 1 werden angegebene Dimensionen immer verwendet, daher müssen wir unsere Regeln nur anwenden, um die zweite Dimension zu bestimmen.

Keine Dimensionen oder intrinsisches Verhältnis

Wenn das Bild keine Dimensionen oder ein intrinsisches Verhältnis hat, gilt Regel 4 und wir verwenden die Dimension des Hintergrundbereichs, um den Wert für die auto Dimension zu bestimmen.

<div></div>

div {
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  border: 2px solid black;
}

div {
  background-image: url(no-dimensions-or-ratio.svg);
  background-size: auto 140px;
}

Hier wird die Breite mithilfe der Breite des Hintergrundbereichs gemäß Regel 4 bestimmt, während die Höhe die 140px, die im CSS angegeben sind, beträgt.

Eine angegebene Dimension ohne intrinsisches Verhältnis

Wenn das Bild eine angegebene Dimension hat, aber kein intrinsisches Verhältnis, wird diese Dimension gemäß Regel 3 verwendet, wenn diese Dimension im CSS auf auto gesetzt ist.

<div></div>

div {
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  border: 2px solid black;
}

div {
  background-image: url(100px-wide-no-height-or-ratio.svg);
  background-size: 200px auto;
}

Hier überschreibt die im CSS angegebene 200px Breite die im SVG angegebene 100px Breite gemäß Regel 1. Da kein intrinsisches Verhältnis oder Höhe angegeben ist, wählt auto die Höhe des Hintergrundbereichs als Höhe für das gerenderte Bild aus.

<div></div>

div {
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  border: 2px solid black;
}

div {
  background-image: url(100px-wide-no-height-or-ratio.svg);
  background-size: auto 125px;
}

In diesem Fall ist die Breite als auto im CSS angegeben, sodass die im SVG angegebenen 100px ausgewählt werden, gemäß Regel 3. Die Höhe wird auf 125px im CSS festgelegt, daher wird diese gemäß Regel 1 ausgewählt.

Eine angegebene Dimension mit intrinsischem Verhältnis

Wenn eine Dimension angegeben ist, wendet Regel 1 diese Dimension aus dem SVG auf den gerenderten Hintergrund an, es sei denn, sie wird ausdrücklich vom CSS überschrieben. Wenn auch ein intrinsisches Verhältnis angegeben ist, wird dieses verwendet, um die andere Dimension zu bestimmen.

<div></div>

div {
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  border: 2px solid black;
}

div {
  background-image: url(100px-height-3x4-ratio.svg);
  background-size: 150px auto;
}

In diesem Fall verwenden wir die im CSS festgelegte Breite des Bildes von 150px, daher wird Regel 1 angewendet. Das intrinsische Seitenverhältnis von 3:4 bestimmt dann die Höhe für den auto Fall.

Keine angegebenen Dimensionen mit intrinsischem Verhältnis

Wenn im SVG keine Dimensionen angegeben sind, wird die im CSS angegebene Dimension angewendet, und dann wird das intrinsische Verhältnis verwendet, um die andere Dimension auszuwählen, gemäß Regel 2.

<div></div>

div {
  width: 300px;
  height: 200px;
  background-repeat: no-repeat;
  border: 2px solid black;
}

div {
  background-image: url(no-dimensions-1x1-ratio.svg);
  background-size: 150px auto;
}

Die Breite wird im CSS mit 150px festgelegt. Der auto-Wert für die Höhe wird mithilfe dieser Breite und dem 1:1-Seitenverhältnis ebenfalls auf 150px berechnet.

• background-size
• CSS-Hintergründe und Rahmen Modul