HTMLImageElement: свойство sizes

Свойство HTMLImageElement sizes позволяет указать ширину макета изображения для каждого из списка условий среды. Это обеспечивает возможность автоматического выбора разных изображений — даже изображений с различной ориентацией или соотношением сторон — по мере изменения состояния документа, чтобы соответствовать различным условиям среды.

Каждое условие указывается с использованием того же формата условного форматирования, что и запросы среды.

Строка, содержащая список, разделенный запятыми, описателей размеров источника, за которым следует необязательный размер по умолчанию. Каждый **описатель размера источника** состоит из условия среды, затем, по крайней мере, одного пробела, затем **значения размера источника**, используемого для изображения, когда условие среды оценивается как true.

Каждый описатель размера источника состоит из условия среды, определенного стандартом запросов среды. Поскольку описатель размера источника используется для указания ширины, используемой для изображения во время макета страницы, условие среды обычно (но не обязательно) полностью основано на ширине. Подробнее о том, как создать условие среды, см. Использование запросов среды, Синтаксис.

Значение размера источника — это CSS <length>. Оно может быть указано с использованием единиц, относительных к шрифту (например, em или ex), абсолютных единиц (например, px или cm) или единицы vw, которая позволяет указывать ширину в процентах от ширины области просмотра (1vw составляет 1% от ширины области просмотра).

В этом примере создаётся макет в стиле блога, отображающий текст и изображение, для которых указаны три значения размера в зависимости от ширины окна. Также доступны три варианта изображения с заданными ширинами. Браузер использует всю эту информацию для выбора изображения и ширины, которые лучше всего соответствуют указанным значениям.

Как именно используются изображения, может зависеть от браузера и плотности пикселей экрана пользователя.

Кнопки внизу примера позволяют на самом деле немного изменить свойство sizes, меняя наибольшую из трёх ширин изображения между 40em и 50em.

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="((min-width: 50em) and (max-width: 60em)) 50em,
              ((min-width: 30em) and (max-width: 50em)) 30em,
              (max-width: 30em) 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

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

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

JavaScript

Код JavaScript обрабатывает две кнопки, которые позволяют переключать третий вариант ширины между 40em и 50em; это делается путём обработки события click, используя метод JavaScript-строки replace() для замены соответствующей части строки sizes.

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,")),
);

Результат

Страница лучше всего отображается в собственном окне, чтобы вы могли полностью настроить размеры.

• Запросы среды
• Использование запросов среды
• HTML-изображения
• Адаптивные изображения
• Использование атрибутов srcset и sizes