разрешение изображения

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

Свойство 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 (1 пиксель изображения на единицу CSS px).
snap: Если ключевое слово snap указано, вычисленное разрешение — это заданное разрешение, округлённое до ближайшего значения, которое сопоставит один пиксель изображения с целым числом пикселей устройства. Если разрешение взято из изображения, то использованное внутреннее разрешение — это нативное разрешение изображения, аналогичным образом скорректированное.

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

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

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

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

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

Примеры

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

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

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

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

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

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

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

Спецификация
CSS Images Module Level 4 # the-image-resolution

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

См. также

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

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