preserveAspectRatio – Seitenverhältnis bewahren

SVG preserveAspectRatio

preserveAspectRatio zeigt keine Wirkung, wenn kein viewBox-Attribut das Seitenverhältnis der Grafik vorgibt. Hat das umfassende Element ein anderes Seitenverhältnis als das Bild, bestimmt preserveAspectRatio mit zwei Werten Lage und Skalierung der Grafik. Das elegante cover und contain aus CSS weicht dem hölzernen preserveAspectRatio.

preserveAspectRatio="xMidYMid meet"

Ist die Vorgabe und zentriert die die Bitmap je nach Querformat oder Hochformat vertikal bzw. horizontal.

preserveAspectRatio="none"

streckt und quetscht das Rasterbild auf das Seitenverhältnis des umfassenden Elements.

slice

anstelle von meet wirkt wie CSS background-size: cover, passt das Bild in beiden Dimsionen an und schneidet den Überstand ab.

SVG preserveAspectRatio

Neben viewBox gibt es das preserveAspectRatio-Attribut, das die Lage, die Größe und das Seitenverhältnis (Aspect Ratio) der Grafik innerhalb eines übergroßen Elements festlegt. preserve Aspect Ratio ist wirkungslos, solange viewBox nicht das Seitenverhältnis der Grafik diktiert. Wenn das umfassende Element ein anderes Seitenverhältnis als die Grafik hat, bestimmt preserve AspectRatio mit zwei Werten Lage und Skalierung der Grafik.

preserveAspectRatio="xMidYMid meet"

Gleich ob Hochformat oder Querform – ist die Vorgabe und zentriert die Grafik je nach Querformat oder Hochformat vertikal bzw. horizontal.

preserveAspectRatio="none"

streckt und quetscht die Grafik auf das Seitenverhältnis des umfassenden Elements.

slice

anstelle von meet wirkt wie CSS background-size: cover, passt die Grafik in beiden Dimsionen an und schneidet den Überstand ab.

Gut aufpassen auf die Groß- und Kleinschreibung von xMidYMid … kleines x, großes Y.