Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Свойство image-rendering

Дата:2.11.15 в 17:58

Характеристики свойства

В каких браузерах работает?

- 10.0+ 11.6+ - 3.6+ - -

В каких версиях CSS используется?

CSS 1 CSS 2 CSS 2.1 CSS 3
- - - -

Для чего используется?

Специфическое свойство, посредством которого браузеру сообщается специальный алгоритм обработки картинки при ее масштабировании пользователем или настройками браузера. При этом в исходном положении изображение не будет меняться вне зависимости от установленного алгоритма. Трансформация вступит в силу только после изменения масштабирования рассматриваемого объекта.

Как правильно задавать?

image-rendering:значение;

Какие могут быть значения?

  • auto - передает право установки алгоритма интерполяции браузеру. В этом режиме используется optimizeQuality.
  • optimizeSpeed - изображение интерполируется по соседним пикселям, что значительно ускоряет загрузку изображения. Сохраняет основные качественные показатели.
  • optimizeQuality - служит инструментом повышения качества отображения рисунка благодаря способу бикубической обработки пикселей.
  • crisp-edges - усиливает резкость контурных линий и не допускает эффекта размытия.

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойство image-rendering</title>
  <style>
  .easyOptimize { border: 1px solid #ccc; }
   .niceOptimize { 
    image-rendering: optimizeQuality;
   }
  </style>
 </head>
 <body>
  <p><img class="easyOptimize" src="images/some-picture.jpg  width="200">
  <img src="images/some-picture.jpg" width="200" class="niceOptimize { 
    imatOptimize"></p>
 </body>
</html>

Оценка: 
Оценок: 2 (средняя 5 из 5)
Тип CSS свойства: 
Понравилась статья? Расскажите о ней друзьям: