HTMLImageElement: sizes-Eigenschaft

Baseline Weitgehend verfgbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Gerten und in vielen Browserversionen. Sie ist seit Mrz 2016 browserbergreifend verfgbar.

Mehr erfahren
Vollstndige Kompatibilitt anzeigen

Die sizes-Eigenschaft der HTMLImageElement-Schnittstelle ermglicht es Ihnen, die Layoutbreite des Bildes fr jede der Liste von Media Queries oder auto fr nach Bedarf geladene Bilder anzugeben. Dadurch kann der Browser ein Bild basierend auf der Layoutgre des Elements automatisch auswhlen und anzeigen. Dies ermglicht es dem Browser, zwischen verschiedenen Bildern, die im srcset des Elements angegeben sind, zu whlen, um unterschiedlichen Medienbedingungen gerecht zu werden sogar Bilder mit unterschiedlichen Ausrichtungen oder Seitenverhltnissen.

Die sizes-Eigenschaft spiegelt das sizes-Inhaltsattribut des <img>-Elements wider. Es kann nur vorhanden sein, wenn srcset Breitenangaben verwendet.

Wert

Ein String, der das auto-Schlsselwort (wahlweise gefolgt von einer beliebigen Anzahl von Quellgren) oder eine oder mehrere Quellgren sein kann.

Weitere Informationen finden Sie im sizes-Attribut in der HTML-Referenz fr <img>.

Beispiele

Auswahl eines Bildes passend zur Fensterbreite

Dieses Beispiel demonstriert, wie der Browser das sizes-Attribut verwendet, um basierend auf der gerenderten Breite des Bildes in der aktuellen Sichtfensterbreite ein Bild aus srcset auszuwhlen. Es erlaubt Ihnen auch, den Effekt des nderns der Gre des Browserfensters zu sehen, welches Bild geladen wird.

HTML

Um den Effekt des Lazy Loadings zu demonstrieren, mssen die Bilder zunchst vor dem visuellen Sichtfenster verborgen sein und dann in den sichtbaren Bereich gescrollt werden. Dies wird erreicht, indem ein uerer scroll-container-<div> verwendet wird, der spacer- und demo-wrap-Container einbettet. Das Bild befindet sich im demo-wrap-Container, der durch die auf dem spacer-Container festgelegte Hhe aus dem visuellen Sichtfenster herausgeschoben wird.

Das <img>-Element hat die folgenden Attribute:

srcset definiert vier Bilder und gibt an, dass sie 600px, 900px, 1200px und 1500px breit sind.
src gibt das Bild an, das verwendet wird, wenn srcset nicht untersttzt wird oder nicht geparst werden kann. Wir verwenden das grte Bild im srcset, da dies fast immer besser herunterskaliert als das kleinste Bild hochskaliert.
loading ist lazy.
sizes gibt die erwartete gerenderte Breite des Bildes an einer Reihe von Sichtfenster-Brechenpunkten an, was dem Browser ermglicht, das passendste Bild aus srcset auszuwhlen.

html

<div id="scroll-container">
  Scroll down to display images
  <div id="spacer"></div>
  <div id="demo-wrap">
    <div class="img-container" id="resizable">
      <div class="img-square">
        <img
          loading="lazy"
          sizes="(max-width: 600px) 600px, (max-width: 900px) 900px, (max-width: 1200px) 1200px, 1500px"
          src="1500.png"
          srcset="600.png 600w, 900.png 900w, 1200.png 1200w, 1500.png 1500w"
          alt="Example image" />
      </div>
      <div class="label">
        <strong>Container width: <span id="width-label"></span></strong>
      </div>
    </div>
  </div>
</div>

<pre id="log"></pre>

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

#log {
  height: 100px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

#scroll-container {
  height: 600px;
  overflow-y: scroll;
  border: 2px solid #cccccc;
}
#spacer {
  height: 620px;
}
#demo-wrap {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 16px;
}
.img-container {
  border: 2px solid #cccccc;
  overflow: hidden;
}
.img-square {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.img-square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.label {
  font-size: 13px;
  padding: 6px 10px;
  background: whitesmoke;
}
#resizable {
  width: 100%;
}

// Logging
const images = document.querySelectorAll(".img-square img");
const widthLabel = document.getElementById("width-label");

function updateWidthLabel() {
  widthLabel.textContent = `${document.getElementById("resizable").offsetWidth}px`;
}

updateWidthLabel();
new ResizeObserver(updateWidthLabel).observe(
  document.getElementById("resizable"),
);

images.forEach((img) => {
  if (img.complete) {
    log(`Already cached: ${img.currentSrc} (${img.offsetWidth}px)`);
  }
  img.addEventListener("load", () => {
    log(`Loaded: ${img.currentSrc} (${img.offsetWidth}px container)`);
  });
});

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        log(`Entered viewport: ${img.alt}`);
        observer.unobserve(img);
      }
    });
  },
  {
    root: document.getElementById("scroll-container"),
    rootMargin: "0px",
    threshold: 0.1,
  },
);

images.forEach((img) => observer.observe(img));

Das CSS und JavaScript wird nicht angezeigt (wenn Sie diese untersuchen mchten, whlen Sie "Play", um das gesamte Beispiel im interaktiven Playground anzusehen).

Ergebnis

Das Beispiel wird am besten in einem eigenen Fenster betrachtet, damit Sie die Gren voll anpassen knnen und das Beispiel nicht durch den umgebenden Rahmen eingeschrnkt wird.

Scrollen Sie den Rahmen, um das Bild anzuzeigen. Das Etikett am unteren Rand des Bildes zeigt die aktuelle Containerbreite an.
Passen Sie die Gre des Fensters an Sie sollten das Bild an den Medienabfrage-Brechenpunkten des sizes-Attributs wechseln sehen.

Beachten Sie, dass das ausgewhlte Bild grer sein kann, als die alleinige Containerbreite vermuten lsst. Viele Displays, wenn nicht die meisten, haben ein Device Pixel Ratio (DPR) grer als eins. Um ein scharfes Bild bei der physischen Pixeldichte des Displays zu rendern, multipliziert ein Browser den passenden sizes-Hinweis mit dem DPR, bevor es aus srcset auswhlt. Beispielsweise schaut ein Browser bei einer 2-Anzeige mit einem Sichtfenster von ~500px auf ein ~1200px-Bild und whlt 1200.png als die am besten verfgbare Gre und skaliert es dann, um in den verfgbaren Raum zu passen.

Hinweis: Infolgedessen knnten einige der Bilder im srcset auf einem bestimmten Display bei einigen Brechenpunkten nicht erreichbar sein, und dies knnte browserabhngig sein.

Das Protokoll liefert Informationen, wenn ein load-Ereignis fr das Bild ausgelst wird und wann es den sichtbaren Sichtbereich schneidet. Beachten Sie, dass das Bild lazy-loaded ist, daher sollte das load-Ereignis gerade ausgelst werden, bevor das Bild in das Sichtfenster eintritt.

Automatische Bildauswahl fr lazy-geladene Bilder

Dieses Beispiel zeigt, wie die Einstellung des sizes-Wertes auf auto die Auswahl des Bildes aus dem srcset beeinflusst, wenn <img>-Elemente lazy-geladen werden. Es ermglicht Ihnen auch, den Effekt der nderung der Gre eines Containers auf das geladene Bild zu sehen.

HTML

Das HTML ist hnlich dem im vorherigen Beispiel, mit der Ausnahme, dass es drei nahezu identische <img>-Elemente definiert, jedes mit einem srcset, das 3 Bilder anzeigt, die 600px, 400px und 200px breit sind, und mit einem sizes-Wert von auto. Diese sind innerhalb von Containern eingeschrnkt, die so dimensioniert sind, dass die verschiedenen Bilder ausgewhlt werden.

html

<div id="scroll-container">
  Scroll down to display images
  <div id="spacer"></div>
  <div id="demo-wrap">
    <div class="img-container img-container--sm" id="resizable">
      <div class="img-square">
        <img
          loading="lazy"
          sizes="auto"
          src="600.png"
          srcset="600.png 600w, 400.png 400w, 200.png 200w"
          alt="Image in small container" />
      </div>
      <div class="label"><strong>Container width: 100px</strong></div>
    </div>

    <div class="img-container img-container--md">
      <div class="img-square">
        <img
          loading="lazy"
          sizes="auto"
          src="600.png"
          srcset="600.png 600w, 400.png 400w, 200.png 200w"
          alt="Image in medium container" />
      </div>
      <div class="label"><strong>Container width: 200px</strong></div>
    </div>

    <div class="img-container img-container--lg">
      <div class="img-square">
        <img
          loading="lazy"
          sizes="auto"
          src="600.png"
          srcset="600.png 600w, 400.png 400w, 200.png 200w"
          alt="Image in large container" />
      </div>
      <div class="label"><strong>Container width: 400px</strong></div>
    </div>
  </div>
</div>

<div id="controls">
  <label for="slider">First image width:</label>
  <input type="range" id="slider" min="100" max="700" value="100" step="1" />
  <input type="number" id="number" min="100" max="700" value="100" step="1" />
  <span>px</span>
</div>

<pre id="log"></pre>

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

#log {
  height: 100px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

CSS

Hier zeigen wir die CSS-Klassen, die die Gre der verschiedenen Bildcontainer festlegen.

#scroll-container {
  height: 400px;
  overflow-y: scroll;
  border: 2px solid #cccccc;
}
#spacer {
  height: 600px;
}
#demo-wrap {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 16px;
}
.img-container {
  border: 2px solid #cccccc;
  overflow: hidden;
}
.img-square {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.img-square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.label {
  font-size: 13px;
  padding: 6px 10px;
  background: whitesmoke;
}

#controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
#number {
  width: 60px;
}

css

.img-container--sm {
  width: 100px;
}
.img-container--md {
  width: 200px;
}
.img-container--lg {
  width: 400px;
}

const slider = document.getElementById("slider");
const number = document.getElementById("number");
const resizable = document.getElementById("resizable");
const resizableImg = resizable.querySelector("img");
const resizableLabel = resizable.querySelector(".label strong");

function setSize(px) {
  px = Math.min(700, Math.max(100, px));
  resizable.style.width = `${px}px`;
  resizableImg.sizes = `${px}px`; // update sizes so browser can pick new srcset candidate
  resizableLabel.textContent = `${px}px`;
  slider.value = px;
  number.value = px;
}

slider.addEventListener("input", () => setSize(slider.valueAsNumber));
number.addEventListener("input", () => setSize(number.valueAsNumber));

// Logging
const images = document.querySelectorAll(".img-square img");

images.forEach((img) => {
  if (img.complete) {
    log(`Already cached: ${img.currentSrc} (${img.offsetWidth}px)`);
  }
  img.addEventListener("load", () => {
    log(`Loaded: ${img.currentSrc} (${img.offsetWidth}px container)`);
  });
});

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        log(`Entered viewport: ${img.alt}`);
        observer.unobserve(img);
      }
    });
  },
  {
    root: document.getElementById("scroll-container"),
    rootMargin: "0px",
    threshold: 0.1,
  },
);

images.forEach((img) => observer.observe(img));

Das restliche CSS und das JavaScript, das den Slider, das Logging und so weiter steuert, wird nicht angezeigt (wenn Sie daran interessiert sind, diese zu untersuchen, whlen Sie "Play", um das gesamte Beispiel im interaktiven Playground anzusehen).

Ergebnis

Scrollen Sie den Rahmen, um die drei Bilder anzuzeigen. Der Browser sollte fr jedes eine andere Bildauswahl vorgenommen haben, basierend auf den unterschiedlichen Breitenbeschrnkungen. Sie knnen den Slider verwenden, um die Gre des Containers fr das erste Bild zu ndern. Beachten Sie, dass der Browser mglicherweise ein neues Bild auswhlt oder auch nicht, um es anzuzeigen, wenn sich die Gre des Containers ndert, da Implementierungen nicht erforderlich sind, auf dynamische nderungen zu reagieren.

Das Protokoll liefert Informationen, wenn ein load-Ereignis fr jedes Bild ausgelst wird und wenn ein Bild den sichtbaren Sichtbereich schneidet. Beachten Sie, dass die Bilder lazy-loaded sind, daher sollte das load-Ereignis gerade ausgelst werden, bevor das Bild in das Sichtfenster eintritt. Beachten Sie auch, dass das load-Ereignis ebenfalls ausgelst wird, wenn Sie die Containergre fr das erste Bild ndern, was anzeigt, wann der Browser das Layout neu berechnet hat (nicht unbedingt, dass ein neues Bild geladen wurde).

Blog-Beispiel

Dieses Beispiel ist ein etwas realistischeres Szenario, das demonstriert, wie ein Bild passend zu einer Fensterbreite mithilfe von Quellgren ausgewhlt wird.

In diesem Beispiel wird ein blogartiges Layout erstellt, das etwas Text und ein Bild anzeigt, fr das drei Grenpunkte abhngig von der Fensterbreite angegeben sind. Ebenso sind drei Versionen des Bildes verfgbar, mit ihren Breiten spezifiziert. Der Browser nimmt all diese Informationen und whlt ein Bild und eine Gre aus, die am besten zu den angegebenen Werten passen.

Wie genau die Bilder verwendet werden, kann vom Browser und der Pixeldichte des Displays des Benutzers abhngen.

Schaltflchen am unteren Rand des Beispiels erlauben es Ihnen, die sizes-Eigenschaft leicht zu ndern, indem die grte der drei Breiten fr das Bild zwischen 40em und 50em gewechselt wird.

HTML

html

<article>
  <h1>An amazing headline</h1>
  <div class="test"></div>
  <p>
    This is even more amazing content text. It's really spectacular. And
    fascinating. Oh, it's also clever and witty. Award-winning stuff, I'm sure.
  </p>
  <img
    src="new-york-skyline-wide.jpg"
    srcset="
      new-york-skyline-wide.jpg 3724w,
      new-york-skyline-4by3.jpg 1961w,
      new-york-skyline-tall.jpg 1060w
    "
    sizes="(50em <= width <= 60em) 50em,
              (40em <= width < 50em) 30em,
              (width < 40em) 20em"
    alt="The New York City skyline on a beautiful day, with the One World Trade Center building in the middle." />
  <p>
    Then there's even more amazing stuff to say down here. Can you believe it? I
    sure can't.
  </p>

  <button id="break40">Last Width: 40em</button>
  <button id="break50">Last Width: 50em</button>
</article>

CSS

css

article {
  margin: 1em;
  max-width: 60em;
  min-width: 20em;
  border: 4em solid #880e4f;
  border-radius: 7em;
  padding: 1.5em;
  font:
    16px "Open Sans",
    "Verdana",
    "Helvetica",
    "Arial",
    sans-serif;
}

article img {
  display: block;
  max-width: 100%;
  border: 1px solid #888888;
  box-shadow: 0 0.5em 0.3em #888888;
  margin-bottom: 1.25em;
}

JavaScript

Der JavaScript-Code verarbeitet die zwei Schaltflchen, mit denen Sie die dritte Grenoption zwischen 40em und 50em umschalten knnen; dies geschieht durch das Handling des click-Ereignisses und Verwendung der JavaScript-String-replace()-Methode, um den relevanten Teil des sizes-Strings zu ersetzen.

const image = document.querySelector("article img");
const break40 = document.getElementById("break40");
const break50 = document.getElementById("break50");

break40.addEventListener(
  "click",
  () => (image.sizes = image.sizes.replace(/50em,/, "40em,")),
);

break50.addEventListener(
  "click",
  () => (image.sizes = image.sizes.replace(/40em,/, "50em,")),
);

Ergebnis

Die Seite wird am besten in einem eigenen Fenster betrachtet, damit Sie die Gren voll anpassen knnen und das Beispiel nicht durch den umgebenden Rahmen eingeschrnkt wird.

Aktivieren Sie die Entwicklertools und ndern Sie die Breite der Seite Sie sollten das Bild an den Medienabfrage-Brechenpunkten des Sizes-Attributs wechseln (und in der Gre springen) sehen: 640px (40em) und 800px (50em).
Stellen Sie die Breite zwischen 50em (800px) und 60em (960px) ein, damit die letzte Medienabfrage ausgewhlt wird. Drcken Sie dann abwechselnd jede der Schaltflchen und beobachten Sie, wie sich die Layoutgre des Bildes ndert.

Spezifikationen

Spezifikation
HTML # dom-img-sizes

Browser-Kompatibilitt

Siehe auch

Help improve MDN

War diese bersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen knnen Diese Seite wurde automatisch aus dem Englischen bersetzt.

bersetzung auf GitHub anzeigen Fehler mit dieser bersetzung melden

HTML DOM API
HTMLImageElement
Konstruktor
1. Image()
Instanzeigenschaften
Instanzmethoden
1. decode()
Vererbung
Verwandte Seiten fr HTML DOM
Anleitungen
1. Verwenden von Microtasks in JavaScript mit queueMicrotask()
2. Im Detail: Microtasks und die JavaScript-Laufzeitumgebung