image-rendering

Пример

Покажите различные алгоритмы, которые можно использовать для масштабирования изображения:

.image {
height: 100px;
width: 100px;
image-rendering: auto;
}

.crisp-edges {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}

.pixelated {
image-rendering: pixelated;
}

.smooth {
image-rendering: smooth;
}

.high-quality {
image-rendering: high-quality;
}

Попробуйте сами »

Определение image-rendering

CSS свойство image-rendering определяет тип алгоритма, который будет использоваться для масштабирования изображения.

Примечание: Это не имеет никакого эффекта, на изображениях, которые не масштабируются.

Показ демо ❯

Значение по умолчанию:	auto
Унаследовано:	yes
Анимируемый:	no. Читайте о animatable
Версия:	CSS3
JavaScript синтаксис:	object.style.imageRendering="pixelated" Попробуй

Поддержка image-rendering

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Свойство
image-rendering	41.0	79.0	65.0	10.0	28.0

Chrome, Edge, Opera и Safari используют альтернативное название CSS свойств значения crisp-edges: -webkit-optimize-contrast.

Синтаксис image-rendering

Значения image-rendering

Значение	Описание	Демонстрация
auto	Позвольте браузеру выбрать алгоритм масштабирования. Это значение по умолчанию	Демо ❯
smooth	Используйте алгоритм, который сглаживает цвета на изображении	Демо ❯
high-quality	То же, что и smooth, но с предпочтением более качественного масштабирования	Демо ❯
crisp-edges	Используйте алгоритм, который сохранит контрастность и края изображения	Демо ❯
pixelated	Если изображение увеличено, используется алгоритм поиска ближайшего соседа, поэтому изображение будет выглядеть состоящим из больших пикселей. Если изображение уменьшено, оно будет таким же, как автоматическое	Демо ❯
initial	Устанавливает для этого свойства значение по умолчанию. Читайте о initial
inherit	Наследует это свойство от своего родительского элемента. Читайте о inherit