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