Свойство CSS `image-resolution`

Экспериментальная технология: Это экспериментальная технология
Перед использованием в production внимательно изучите таблицу совместимости с браузерами.

Свойство image-resolution CSS задаёт собственное разрешение всех растровых изображений, используемых в элементе или на нём. Оно влияет на изображения содержимого, например на замещаемые элементы и генерируемое содержимое, а также на декоративные изображения, например изображения background-image.

Разрешение изображения определяется как количество пикселей изображения на единицу длины, например пикселей на дюйм. По умолчанию CSS предполагает, что на одну единицу CSS px приходится один пиксель изображения; однако свойство image-resolution позволяет задать другое разрешение.

Синтаксис

image-resolution: from-image;
image-resolution: 300dpi;
image-resolution: from-image 300dpi;
image-resolution: 300dpi snap;

/* Global values */
image-resolution: inherit;
image-resolution: initial;
image-resolution: revert;
image-resolution: revert-layer;
image-resolution: unset;

Значения

Это свойство задаётся одним или несколькими значениями из следующего списка, разделёнными пробелами:

<resolution>: Явно задаёт собственное разрешение.
from-image: Использует собственное разрешение, заданное форматом изображения. Если изображение не задаёт собственное разрешение, используется явно заданное разрешение (если оно указано), в противном случае применяется значение 1dppx (один пиксель изображения на единицу CSS px).
snap: Если задано ключевое слово snap, вычисленное разрешение представляет собой указанное разрешение, округлённое до ближайшего значения, при котором один пиксель изображения соответствует целому числу пикселей устройства. Если разрешение берётся из изображения, используемое собственное разрешение изображения аналогичным образом корректируется.

Примечание: поскольку векторные форматы, например SVG, не имеют собственного разрешения, это свойство не влияет на векторные изображения.

Формальное определение

Начальное значение	1dppx
Применяется к	всем элементам
Наследуется	да
Вычисленное значение	как задано, за исключением того, что <resolution> может быть изменено вычисленным значением для 'snap'
Тип анимации	дискретный

Формальный синтаксис

image-resolution = 
  [ from-image || <resolution> ] &&
  snap?

Примеры

Задание высокого dpi для печати

При печати документа используется более высокое разрешение.

@media print {
  .my-image {
    image-resolution: 300dpi;
  }
}

Использование разрешения изображения с резервным значением

Используется разрешение изображения. Если у изображения нет разрешения, вместо значения по умолчанию 1dppx используется 300dpi.

.my-image {
  image-resolution: from-image 300dpi;
}

Спецификации

Спецификация
Модуль CSS Images, уровень 4 # the-image-resolution

Совместимость с браузерами

В настоящее время ни один браузер не поддерживает эту функцию.

См. также

Другие свойства CSS, связанные с изображениями: object-fit, object-position, image-orientation, image-rendering.
Ошибка Chromium: 1086473.

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/image-resolution