Verwenden Sie picture, um an einem Viewport-Breakpoint zwischen quadratischen und breiten Bilddateien zu wechseln. Geben Sie jeder Quelle ihre eigenen Abmessungen und lassen Sie CSS das ausgewählte Bild proportional skalieren. Diese Anleitung erstellt und testet ein lokales Beispiel auf einem Mac.

Wie wechselt picture zwischen verschiedenen Seitenverhältnissen?

Platzieren Sie ein source-Element mit einer media-Bedingung vor dem Fallback-img innerhalb von picture. Der Browser wählt die erste infrage kommende Quelle aus, deren Bedingung zutrifft, und wählt dann ein Bild aus dem srcset dieser Quelle. Dies wird Art Direction genannt: unterschiedliche Bildkompositionen für unterschiedliche Layouts bereitzustellen. Der HTML-Standard unterstützt diesen Ansatz ausdrücklich. HTML-Standard: Bilder

Drei Teile greifen ineinander: Die Quelle wählt die Ressource aus, Dimensionsattribute beschreiben deren Proportionen und CSS steuert ihre dargestellte Größe. Die Attribute width und height der ausgewählten Quelle können das Seitenverhältnis für das eingebettete Bild bereitstellen. Das picture-Element selbst stellt das Bild nicht dar; das übernimmt sein img. HTML-Standard: Eingebettete Inhalte

Wählen Sie den Mechanismus entsprechend dem gewünschten Ergebnis:

Ihre Anforderung Geeigneter Mechanismus
Bildkomposition oder Seitenverhältnis an einem Breakpoint ändern picture mit einem source, das media verwendet
Verschiedene Auflösungen derselben Bildkomposition anbieten srcset, bei Verwendung von Breiten-Deskriptoren mit sizes
Eine Datei beibehalten, aber innerhalb eines festen Rahmens zuschneiden CSS-Größenanpassung und object-fit: cover

Diese Mechanismen treffen unterschiedliche Entscheidungen. Art Direction bestimmt, welche Bildkomposition angezeigt wird. Bei der Auflösungswahl kann der Browser innerhalb einer Bildkomposition einen geeigneten Kandidaten auswählen. Die CSS-Anpassung bestimmt, wie die ausgewählte Ressource ihren Rahmen ausfüllt. MDN dokumentiert diese Verwendungsweisen von picture und dessen Zusammenspiel mit srcset und Anpassungseigenschaften. MDN: Das picture-Element

Ein vollständiges lokales Beispiel auf Ihrem Mac erstellen

Das Beispiel verwendet zwei originale SVG-Ressourcen mit einem orangefarbenen Kreis und einem abgerundeten türkisfarbenen Rechteck. In der quadratischen Version sind sie übereinander angeordnet, in der breiten Version nebeneinander. Alles befindet sich in einem Ordner; zum Wechseln sind weder externe Assets noch JavaScript erforderlich.

Die Vorgaben für die Ressourcen sind einfach: Bei einer Viewport-Breite unter 700px wird eine quadratische Ressource mit 600 × 600 verwendet. Ab 700px kommt eine breite Ressource mit 1200 × 600 zum Einsatz. Das angezeigte Bild füllt einen Inhaltsbereich mit einem Abstand von 16px auf jeder Seite und einer maximalen Breite von 960px. Diese Abmessungen und der Breakpoint dienen der Veranschaulichung.

Die beiden Formen als Ressourcen speichern

Erstellen Sie einen Ordner namens picture-demo. Erstellen Sie darin mit einem einfachen Texteditor die folgenden zwei Dateien und behalten Sie dabei ihre exakten Namen und Dateiendungen bei. Jeder Codeblock enthält die vollständige Datei; kopieren Sie den Inhalt ohne die Markdown-Begrenzungszeilen.

Speichern Sie dies als shapes-square.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600">
  <rect width="600" height="600" fill="#fff5df"/>
  <circle cx="300" cy="180" r="100" fill="#de7b35"/>
  <rect x="150" y="340" width="300" height="160" rx="40" fill="#247d83"/>
</svg>

Speichern Sie dies als shapes-wide.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 1200 600">
  <rect width="1200" height="600" fill="#fff5df"/>
  <circle cx="320" cy="300" r="180" fill="#de7b35"/>
  <rect x="650" y="150" width="400" height="300" rx="60" fill="#247d83"/>
</svg>

Die HTML-Seite speichern

Erstellen Sie index.html im selben Ordner. Wenn Sie TextEdit verwenden, wählen Sie Ablage > Neu und dann Format > In reinen Text umwandeln, bevor Sie den Code einfügen. Speichern Sie die Datei mit der Dateiendung .html und wählen Sie bei entsprechender Aufforderung Use .html. Apple dokumentiert diesen Arbeitsablauf zum Erstellen von HTML-Dateien. Apple: Mit HTML-Dokumenten in TextEdit auf dem Mac arbeiten

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape study</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    main { width: calc(100% - 32px); max-width: 960px; margin: 24px auto; }
    picture { display: block; }
    .study-image { display: block; width: 100%; height: auto; }
  </style>
</head>
<body>
  <main>
    <h1>Shape study</h1>
    <picture>
      <source media="(min-width: 700px)" srcset="shapes-wide.svg"
              width="1200" height="600">
      <img class="study-image" src="shapes-square.svg"
           width="600" height="600"
           alt="An orange circle and a teal rounded rectangle on cream.">
    </picture>
    <p>Resize the viewport to compare the two arrangements.</p>
  </main>
</body>
</html>

Öffnen Sie index.html in Safari. Bei einem ausreichend breiten Viewport sollten die Formen nebeneinander erscheinen. Bei einem schmaleren Viewport sollten sie übereinander angeordnet sein. Lassen Sie alle drei Dateien im selben Ordner: Die relativen Ressourcen-URLs werden ausgehend vom Speicherort der HTML-Datei aufgelöst.

Die breite Quelle verwendet srcset, obwohl sie nur eine URL enthält. Innerhalb von picture verlangt source das Attribut srcset; das Attribut src ist dort nicht zulässig. Dimensionsattribute sind ganzzahlig und haben keine Einheit. Verwenden Sie also width="1200" und nicht width="1200px". MDN: Das source-Element

Warum sowohl für die Quelle als auch für das Fallback Abmessungen angeben?

Die Abmessungen 600 × 600 des Fallbacks beschreiben die quadratische Ressource. Die Abmessungen 1200 × 600 der breiten Quelle beschreiben die breite Ressource. Mit beiden Wertepaaren kann ein unterstützender Browser die Proportionen des ausgewählten Bildes festlegen, bevor er es herunterlädt. Würden für die breite Quelle dieselben Abmessungen wie für die quadratische Ressource verwendet, ergäbe sich zunächst das falsche Seitenverhältnis. HTML-Standard: Dimensionsattribute von source

Anschließend legt CSS die Bildbreite auf die verfügbare Inhaltsbreite fest und lässt die Höhe automatisch. So kann die Höhe anhand der Bildproportionen bestimmt werden. Der CSS-Sizing-Entwurf beschreibt, wie ein bevorzugtes Seitenverhältnis in die automatische Größenanpassung einfließt; explizit festgelegte Werte für beide Dimensionen nehmen diesen Spielraum. CSS Box Sizing Module Level 4

Für dieses Beispiel lässt sich das Layout mit einer kleinen Berechnung überprüfen:

Bildbreite = min(Viewport-Breite - 32, 960)
Höhe des quadratischen Bildes = Bildbreite
Höhe des breiten Bildes = Bildbreite / 2
Viewport-Breite in CSS-Pixeln Ausgewählte Ressource Berechnete Bildgröße
500 shapes-square.svg 468 × 468
699 shapes-square.svg 667 × 667
700 shapes-wide.svg 668 × 334
1000 shapes-wide.svg 960 × 480

Dies sind die berechneten Erwartungen für das angegebene CSS, unter der Annahme, dass kein Scrollleistenbereich die verfügbare Inhaltsfläche verkleinert. Die SVG-Syntax, Ressourcennamen, angegebenen Abmessungen und Berechnungen wurden programmatisch überprüft; während der Vorbereitung wurde das Beispiel nicht in einem Browser dargestellt.

Beachten Sie die große Höhenänderung zwischen 699px und 700px. Sie ergibt sich direkt aus dem Wechsel von einer quadratischen zu einer breiten Bildkomposition. Beim Ändern der Viewport-Größe ist das zu erwarten. Ein weiterer Sprung nach dem Laden bei unverändertem Viewport ist ein Anlass, die angegebenen Abmessungen und überschreibende CSS-Regeln zu prüfen.

Den Breakpoint in Safari genau testen

Mit dem Modus „Responsive Design“ in Safari können Sie den Seiten-Viewport unabhängig vom Desktopfenster anpassen. Aktivieren Sie in den Erweitert-Einstellungen von Safari die Option Webentwickler-Funktionen anzeigen. Öffnen Sie dann das Beispiel und wählen Sie Entwickler > Modus „Responsive Design“ aktivieren oder drücken Sie Control-Command-R. WebKit dokumentiert die Einstellung, das Tastenkürzel und die skalierbare Vorschau. WebKit: Vereinfachter Modus „Responsive Design“

Testen Sie zuerst 699px und 700px, danach einen deutlich schmaleren und einen deutlich breiteren Viewport. Prüfen Sie, ob sich die Bildkomposition an der vorgesehenen Grenze ändert, die orangefarbene Form rund bleibt und der Absatz unter dem Bild seiner veränderten Höhe folgt. Laden Sie die Seite auf beiden Seiten des Breakpoints neu, um neben der Größenänderung auch das anfängliche Layout zu prüfen.

Um direkt zu überprüfen, welche Datei Safari ausgewählt hat, führen Sie beim Anzeigen des Beispiels optional dieses Diagnose-Snippet in der Konsole des Web-Inspectors aus:

const studyImage = document.querySelector('.study-image');
if (!studyImage) {
  throw new Error('Open the Shape study example before running this snippet.');
}
const studyBox = studyImage.getBoundingClientRect();
console.table({
  selectedURL: studyImage.currentSrc,
  displayedWidth: studyBox.width,
  displayedHeight: studyBox.height
});

Führen Sie das Snippet erneut aus, nachdem Sie den Breakpoint überschritten haben. Die ausgewählte URL sollte mit dem entsprechenden quadratischen oder breiten Dateinamen enden. Die Eigenschaft currentSrc gibt die vom Browser ausgewählte URL an; ihr Wert allein beweist nicht, dass die Ressource erfolgreich geladen wurde. MDN: Eigenschaft currentSrc von HTMLImageElement

Was sollten Sie prüfen, wenn der Wechsel nicht wie erwartet funktioniert?

Gehen Sie in dieser Reihenfolge vor: Auswahl, Ressourcendimensionen und Darstellung. So wird ein Problem mit der CSS-Größenanpassung nicht mit einem Problem bei der Ressourcenauswahl verwechselt.

  1. Bei großen Viewport-Breiten bleibt die quadratische Datei ausgewählt. Vergewissern Sie sich, dass der Viewport mindestens 700px breit ist, dass source vor img steht und dass die Quelle srcset verwendet. Prüfen Sie bei mehreren Quellen ihre Reihenfolge: Eine frühere passende Quelle kann Vorrang haben. HTML-Standard: Auswahl für Art Direction
  2. Eine Ressource wird nicht angezeigt. Vergleichen Sie die Dateinamen im Markup mit den Dateien im Ordner, einschließlich der Dateiendungen. In diesem Beispiel müssen sich beide SVG-Dateien neben index.html befinden.
  3. Die richtige Ressource erscheint mit der falschen Form. Prüfen Sie das CSS, das auf das tatsächliche img angewendet wird, insbesondere Regeln, die eine feste Höhe zuweisen. Stellen Sie für eine proportionale Größenanpassung height: auto wieder her.
  4. Das Bild springt nach dem Laden. Vergleichen Sie jedes angegebene Dimensionspaar mit dem tatsächlichen Seitenverhältnis der jeweiligen Ressource. Prüfen Sie außerdem, ob ein explizites CSS-aspect-ratio die vorgesehenen Proportionen überschreibt.

Wenn Ihr tatsächliches Design einen festen Rahmen erfordert, legen Sie das Anpassungsverhalten bewusst fest. object-fit: contain erhält die gesamte Ressource und kann leere Bereiche lassen; cover füllt den Rahmen aus und kann Inhalte abschneiden; fill kann das Bild strecken. Wenden Sie Anpassungseigenschaften auf img an. Das mitgelieferte Beispiel benötigt keinen festen Rahmen, da sich sein Layout nach den Proportionen der ausgewählten Ressource richtet. MDN: object-fit

Wo liegen die Grenzen der Browserunterstützung?

Die Unterstützung von picture und die Unterstützung quellenspezifischer Abmessungen sind zwei getrennte Aspekte. Die Kompatibilitätsübersicht des HTML-Standards führt picture in den aktuellen Browser-Engines auf. Laut MDN ist die Eigenschaft width der Quelle, die ihr Dimensionsattribut widerspiegelt, seit Dezember 2022 browserübergreifend verfügbar. Bei älteren Browsern sollten Sie nicht davon ausgehen, dass sie quellenspezifische Abmessungen korrekt reservieren. HTML-Standard: Das picture-Element, MDN: Eigenschaft width von HTMLSourceElement

Wenn keine Quelle zutrifft oder der Browser picture nicht unterstützt, stellt das Fallback-img das Bild bereit. In diesem Beispiel ist das die quadratische Bildkomposition. Bei einem Browser, der die Ressource wechseln kann, aber keine quellenspezifischen Abmessungen unterstützt, werden die endgültigen Proportionen des breiten Bildes möglicherweise erst nach dem Laden festgelegt. MDN: Das picture-Element

Wenn ein Zielbrowser CSS-aspect-ratio unterstützt, aber eine explizite Größenregel benötigt, fügen Sie das folgende CSS-Fragment an das vorhandene Stylesheet an. Es bildet den HTML-Breakpoint nach und gibt vorläufige Seitenverhältnisse an, während das natürliche Seitenverhältnis des geladenen Bildes anschließend übernommen werden kann:

.study-image {
  aspect-ratio: auto 1 / 1;
}

@media (min-width: 700px) {
  .study-image {
    aspect-ratio: auto 2 / 1;
  }
}

MDN dokumentiert die Kombination aus auto und einem Seitenverhältnis; laut MDN ist CSS-aspect-ratio seit September 2021 browserübergreifend verfügbar. Daher hat auch dieses Fragment seine eigene Unterstützungsgrenze. Halten Sie seinen Breakpoint mit der Quellenbedingung synchron und testen Sie die Browser-Versionen, die Sie tatsächlich unterstützen müssen. MDN: aspect-ratio

Sobald das Beispiel korrekt funktioniert, ersetzen Sie die Beispieldateien durch Ihre eigenen Bildkompositionen und aktualisieren Sie die Abmessungen entsprechend. Halten Sie Quellenbedingung, Ressourcenproportionen und CSS-Größenanpassung aufeinander abgestimmt und wiederholen Sie die Prüfungen unmittelbar unterhalb und oberhalb des Breakpoints.

Quellen