Bilder über den Inhaltsbereich hinausgehen lassen

Wenn Bilder in einen Artikel oder ähnliches eingefügt werden, haben sie meist maximal dieselbe Breite wie der Fließtext. Wenn die Fotos es hergeben, kann es aber schön aussehen, wenn sie über die Breite des Inhaltsbereiches hinausgehen – in einem einspaltigen Layout beispielsweise bis zu den Rändern des Browserfensters. Hier zeige ich euch, wie ihr das umsetzen könnt – sowohl für Einspalter als auch Websites mit Sidebar.

.post > *:not( img ):not( video ) {
    margin-left: auto;
    margin-right: auto;
    max-width: 50rem;
    padding-left: 5%;
    padding-right: 5%;
}

Über den Inhaltsbereich hinausgehende Bilder bei Einspaltern

Bei einem Einspalter gibt es zwei Möglichkeiten:

1. Ihr gebt nicht dem Inhaltsbereich die Maximalbreite, sondern den Inhaltselementen selbst. Für die Bilder überschreibt ihr die Maximalbreite dann, sodass sie breiter dargestellt werden.
2. Ihr gebt dem Bild eine Breite mit der Einheit vw, wodurch es größer dargestellt werden kann, als der Eltern-Container.

Beide Lösungen haben ihre Vor- und Nachteile.

Maximalbreite direkt für die Inhaltselemente

Die erste Lösung kann im CSS beispielsweise so aussehen:

.entry-content > * {
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}

.entry-content > .size-full {
    display: block;
    max-width: 100%;
}
Code-Sprache: CSS (css)

Nachteil dieser Lösung:

• Wir müssen jedem einzelnen direkte Kindelement von .entry-content über .entry-content > * eine Maximalbreite geben.

Vorteile dieser Lösung:

• Keine Browser-spezifischen Probleme wie mit vw.
• Das Bild wird nicht über seine eigentliche maximale Größe hinaus vergrößert, was bei dem Einsatz von vw passieren kann.

Ein Live-Beispiel der Lösung könnt ihr auf CodePen sehen.

Breite in vw

Die Lösung mit vw könnte über folgendes CSS umgesetzt werden:

.entry-content {
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}

.entry-content .size-full {
    display: block;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    width: 100vw;
}
Code-Sprache: CSS (css)

Nachteile dieser Lösung:

• Das Bild wird in jedem Fall auf die komplette Breite des Viewports gebracht – auch, wenn der Viewport 2.000 Pixel breit ist, das Bild aber nur 1.500 (gleich mehr dazu, wie sich das verhindern lässt).
• Wir müssen das Bild zentrieren – hier in diesem Beispiel geschehen über das Zusammenspiel von left, position und transform.
• 100vw wird von Browsern unterschiedlich interpretiert. Im Firefox wird das Bild bei dieser Angabe auf die Breite des Viewports inklusive eventuellem Scrollbalken gebracht. Daher gibt es hier dann zusätzlich einen horizontalen Scrollbalken, und ein paar Pixel des Bildes sind nicht zu sehen. In anderen Browsern sind 100vw die Breite des Viewports abzüglich eines eventuellen Scrollbalkens. Hier müsste über ein overflow-x: hidden; beim html-Element der horizontale Scrollbalken versteckt werden.

Vorteile dieser Lösung:

• Wir müssen nicht jedem Inhaltselement eine Maximalbreite geben, sondern nur dem Inhalts-Container.

Bild bei Nutzung von vw mit eigener Breite als Maximalbreite

Der große Nachteil an der vw-Lösung ist meiner Meinung nach, dass ein Bild über die eigene Größe hinaus vergrößert wird, was zu unschönen Ergebnissen führt. Hierfür gibt es folgende Lösung: Wir lesen für jedes Bild die tatsächliche Breite aus und legen diese über einen Inline-Style als max-width fest. Die Breite von 100vw übergeben wir ebenfalls als Inline-Style, sodass sie nur angewendet wird, wenn das Hinzufügen der Maximalbreite geklappt hat. Andernfalls bleibt das Bild auf der Breite des Inhaltselements.

Die Lösung sieht so aus:

{
    let fullWidthImages = document.querySelectorAll('.entry-content .size-full');
    if (fullWidthImages.length != 0) {
        for (let fullWidthImage of fullWidthImages) {
            let naturalWidth = fullWidthImage.naturalWidth;
            fullWidthImage.style.maxWidth = naturalWidth + 'px';
            fullWidthImage.style.width = '100vw';
        }
    }
}
Code-Sprache: JavaScript (javascript)

Wir holen uns zunächst alle Elemente mit der entsprechenden Klasse und durchlaufen die Liste. Über .naturalWidth können wir die tatsächliche Breite eines Bildes auslesen und weisen dem Bild diesen Wert als Maximalbreite sowie 100vw als Breite zu. Damit wäre das Problem mit der Maximalbreite behoben. Das Problem, dass ein Teil des Bildes zumindest im Firefox hinter dem Scrollbalken versteckt ist, wenn ihr 100vw als Breite nutzt, bleibt aber. Für Einspalter würde ich daher die erste Lösung bevorzugen.

Auch für die Einspalter-Lösung mit vw habe ich ein kleines Pen erstellt.

Über den Inhaltsbereich hinausgehende Bilder bei Sidebar-Layout

Bei dem Theme, das ich gerade erstelle, sollen auch bei einem Sidebar-Template Bilder größer dargestellt werden können, als der Inhaltsbereich. Das kann dann so aussehen:

Theoretisch könnte hier mit einiger Rechnerei vielleicht auch mit der Lösung gearbeitet werden, bei der den Inhaltselementen direkt eine Maximalbreite gegeben wird. Ich gehe hier aber nur auf den Ansatz mit vw ein. Ausgangspunkt dafür ist ein normales Zweispalten-Design, bei dem ein Wrapper um Hauptinhalt und Sidebar die Maximalbreite angibt.

Wir benötigen hier die JavaScript-Lösung von vorhin, um die Maximalbreite des Bildes zu setzen. Statt 100vw sollte hier für width aber 100% genutzt werden – das kann auch einfach in die CSS-Datei geschrieben werden, statt als Inline-Style. Wenn die maximale Breite des Wrappers erreicht ist, könnt ihr einen Breakpoint setzen und die Breite der Bilder per CSS über eine calc()-Berechnung so angeben, dass es über die Inhaltsbreite hinausgeht. Dabei solltet ihr den Bildern ein float: right; mitgeben, damit sie sich nach links vergrößern. In dem Theme, das ich gerade baue, sieht die Regel so aus:

@media screen and (min-width: 80em) {

    .sidebar-template .large-featured-image-template .wp-post-image {
        float: right;
        width: calc(100% + ((100vw - 1200px - 2.8rem) / 4));
    }

}
Code-Sprache: CSS (css)

Der Wrapper hat zu diesem Zeitpunkt die Maximalbreite von 1.200 Pixeln erreicht. Ich gebe dem Bild die Breite des Inhaltscontainers (100%) und addiere dazu grob ein Viertel des Platzes, der links und rechts von den 1.200 Pixeln noch übrig ist. So nimmt das Bild ungefähr die Hälfte des Platzes ein, der links neben dem Inhalt noch zur Verfügung steht.

Auch hierfür gibt es ein Live-Beispiel bei CodePen.