ResizeObserverEntry: свойство contentBoxSize

Только для чтения contentBoxSize свойство интерфейса ResizeObserverEntry возвращает массив, содержащий новые размеры области содержимого наблюдаемого элемента, когда выполняется обратный вызов.

Массив, содержащий объекты с новыми размерами области содержимого наблюдаемого элемента. Массив необходим для поддержки элементов, имеющих несколько фрагментов, что встречается в многоколоночных сценариях. Каждый объект в массиве содержит два свойства:

blockSize

Длина области содержимого наблюдаемого элемента в блочном измерении. Для блоков с горизонтальным writing-mode это вертикальное измерение, или высота; если режим написания вертикальный, это горизонтальное измерение или ширина.

inlineSize

Длина области содержимого наблюдаемого элемента в линейном измерении. Для блоков с горизонтальным writing-mode это горизонтальное измерение, или ширина; если режим написания вертикальный, это вертикальное измерение или высота.

Следующий фрагмент взят из примера resize-observer-border-radius.html (посмотреть исходный код). Этот пример включает зелёный прямоугольник, размер которого задаётся в процентах от размера области просмотра. При изменении размера области просмотра закругленные углы прямоугольника изменяются пропорционально размеру прямоугольника. Мы могли бы просто реализовать это с помощью border-radius со значением в процентах, но это быстро приводит к некрасивым эллиптическим углам; это решение даёт вам красивые квадратные углы, которые масштабируются вместе с размером прямоугольника.

const resizeObserver = new ResizeObserver((entries) => {
  for (let 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"));