ResizeObserverEntry: contentBoxSize-Eigenschaft

Ein Array, das Objekte mit der neuen Content-Box-Größe des beobachteten Elements enthält. Das Array ist erforderlich, um Elemente zu unterstützen, die mehrere Fragmente haben, was in Szenarien mit mehreren Spalten vorkommt. Jedes Objekt im Array enthält zwei Eigenschaften:

blockSize

Die Länge der Content-Box des beobachteten Elements in der Blockdimension. Für Boxen mit einem horizontalen writing-mode ist dies die vertikale Dimension oder Höhe; wenn der Schreibmodus vertikal ist, ist dies die horizontale Dimension oder Breite.

inlineSize

Die Länge der Content-Box des beobachteten Elements in der Inline-Dimension. Für Boxen mit einem horizontalen writing-mode ist dies die horizontale Dimension oder Breite; wenn der Schreibmodus vertikal ist, ist dies die vertikale Dimension oder Höhe.

Der folgende Ausschnitt stammt aus dem Beispiel resize-observer-border-radius.html (siehe Quelle). Dieses Beispiel enthält ein grünes Kästchen, das als Prozentsatz der Viewport-Größe dimensioniert ist. Wenn sich die Größe des Viewports ändert, ändern sich die abgerundeten Ecken des Kästchens proportional zur Größe des Kästchens. Wir könnten dies einfach mit border-radius und einem Prozentsatz umsetzen, aber das führt schnell zu unschön aussehenden elliptischen Ecken; diese Lösung bietet Ihnen schöne quadratische Ecken, die mit der Größe des Kästchens skaliert werden.

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      // The standard makes contentBoxSize an array...
      if (entry.contentBoxSize[0]) {
        entry.target.style.borderRadius =
          Math.min(
            100,
            entry.contentBoxSize[0].inlineSize / 10 +
              entry.contentBoxSize[0].blockSize / 10,
          ) + "px";
      } else {
        // … but old versions of Firefox treat it as a single item
        entry.target.style.borderRadius =
          Math.min(
            100,
            entry.contentBoxSize.inlineSize / 10 +
              entry.contentBoxSize.blockSize / 10,
          ) + "px";
      }
    } else {
      entry.target.style.borderRadius =
        Math.min(
          100,
          entry.contentRect.width / 10 + entry.contentRect.height / 10,
        ) + "px";
    }
  }
});

resizeObserver.observe(document.querySelector("div"));