image-rendering

Содержание

Сообщает браузеру, каким алгоритмом интерполировать изображение при масштабировании его размеров или изменении масштаба в параметрах браузера.

Краткая информация

Значение по умолчаниюauto
НаследуетсяДа
ПрименяетсяК изображениям, фоновым картинкам, <video>, <canvas>

Синтаксис

image-rendering: auto | crisp-edges | pixelated

Значения

auto
Браузер применяет встроенный в него алгоритм интерполяции, обычно применяется бикубический метод.
crisp-edges
Цель алгоритма — быстрое отображение картинки, для чего применяется метод интерполяции по ближайшим точкам. Он не создаёт сглаживания вокруг линий и его можно рекомендовать в тех случаях, когда требуется сохранить первоначальный набор цветов и резкость краёв.
pixelated
При увеличении размера картинки сохраняет контраст и контуры изображения, не допуская размытия цветов и контуров. При уменьшении размеров аналогичен auto.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>image-rendering</title>
  <style>
   img { border: 1px solid #ccc; }
   .fast { 
    image-rendering: pixelated;
   }
  </style>
 </head>
 <body>
  <p><img src="image/russia.png" alt="Флаг России" width="200">
  <img src="image/russia.png" alt="Флаг России" width="200" class="fast"></p>
 </body>
</html>

В данном примере две картинки с шириной 30 пикселей увеличиваются до 200 пикселей с использованием разных алгоритмов.

Примечание

Chrome вместо crisp-edges поддерживает значение -webkit-optimize-contrast.

Opera поддерживает значение -o-crisp-edges.

Firefox поддерживает значение -moz-crisp-edges.

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

СпецификацияСтатус
CSS Image Values and Replaced Content Module Level 3Возможная рекомендация

Браузеры

 Internet ExplorerChromeOperaSafariFirefox
auto111.603.6
crisp-edges11.603.6
pixelated4126
 AndroidFirefox MobileOpera MobileSafari Mobile
auto13.611.60
crisp-edges3.611.60
pixelated4.126




Рекомендую хостинг: beget.ru

Сервер падал:53 дн. 23:21 назад.

Посещений в месяц:205640

Посещений в день:100


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru