image-resolution

Свойство image-resolution указывает внутреннее разрешение всех растровых изображений, используемых в элементе или на нем.

Он влияет на изображения содержимого, такие как замененные элементы и сгенерированное содержимое, а также на декоративные изображения, такие как background-image изображения.

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

Изображения, фильтры, композиция

• image-orientation
• image-rendering
• image-resolution
• object-fit
• object-position

• linear-gradient()
• radial-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()
• conic-gradient()
• repeating-conic-gradient()
• url()
• element()
• image()
• cross-fade()

• backdrop-filter
• filter

• background-blend-mode
• isolation
• mix-blend-mode

• contain
• contain-intrinsic-block-size
• contain-intrinsic-height
• contain-intrinsic-inline-size
• contain-intrinsic-size
• contain-intrinsic-width
• container
• container-name
• container-type
• @container
• content-visibility

Синтаксис

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

Использует собственное разрешение, указанное в формате изображения. Если для изображения не указано собственное разрешение, используется явно указанное разрешение (если оно задано), в противном случае по умолчанию используется 1 dppx (1 пиксель изображения на единицу CSS px).

snap

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

Ссылки

• Свойство image-resolution ^{MDN (рус.)}
• CSS Images Module Level 4 ^{Spec (англ.)}

Комментарии