CSS | свойство рендеринга изображений

Опубликовано: 2 Марта, 2022

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

Синтаксис:

 рендеринг формы: авто | четкие края | пиксельный | начальная | наследовать

Property Values:

auto: It is used to indicate that the scaling algorithm will be dependent on the user agent. Different browsers may have different algorithms.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>
    CSS | image-rendering
  </title>
  <style>
    .image-crisp {
  
      /* Using the crisp-edges
      value for demonstration */
      image-rendering: crisp-edges;
    }
  
    .image-auto {
      image-rendering: auto;
    }
  </style>
</head>
<body>
  <h1 style="color: green">
    GeeksforGeeks
  </h1>
  <b>
    CSS | image-rendering
  </b>
  <p>
    Comparing the "crisp-edges"
    value with the "auto" value
    in Firefox
  </p>
  <div class="container">
    <img class="image-crisp"
      src=
"https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"
      width="250px">
    <img class="image-auto"
      src=
"https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"
      width="250px">
  </div>
</body>
</html>

Output: Comparing the crisp-edges value with the auto value

crisp-edges: It is used to indicate that the algorithm will preserve the contrast and edges in the image. It will not smooth out the colors or blur the image due to the use of anti-aliasing. Some of the algorithms used here are nearest-neighbor and other non-smoothing scaling algorithms.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>
    CSS | image-rendering
  </title>
  <style>
    .image-auto {
      image-rendering: auto;
    }
  
    .image-crisp {
      image-rendering: crisp-edges;
    }
  </style>
</head>
  
<body>
  <h1 style="color: green">
    GeeksforGeeks
  </h1>
  <b>
    CSS | image-rendering
  </b>
  <p>
    Comparing the "auto" value
    with the "crisp-edges" value
    in Firefox
  </p>
  <div class="container">
    <img class="image-auto" 
      src=
"https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"
      width="250px">
    <img class="image-crisp" 
      src=
"https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"
      width="250px">
  </div>
</body>
</html>

Output: Comparing the auto value with the crisp-edges value

pixelated: It is used to indicate that the nearest-neighbor algorithm is used on the image when it is scaled up. When the image is scaled down, the behavior is the same as the auto value.

Example:

<!DOCTYPE html>
<html>
  
<head>
  <title>
    CSS | image-rendering
  </title>
  <style>
    .image-crisp {
  
      /* Using the crisp-edges
      value for demonstration */
      image-rendering: crisp-edges;
    }
  
    .image-pixelated {
      image-rendering: pixelated;
    }
  </style>
</head>
  
<body>
  <h1 style="color: green">
    GeeksforGeeks
  </h1>
  <b>
    CSS | image-rendering
  </b>
  <p>
    Comparing the "crisp-edges"
    value with the "pixelated"
    value in Firefox
  </p>
  <div class="container">
    <img class="image-crisp" 
      src=
"https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"
      width="250px">
    <img class="image-pixelated"
      src=
"https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"
      width="250px">
  </div>
</body>
</html>

Output: Comparing the crisp-edges value with the pixelated value

initial: It is used to set the property to its default value.
Example:

<!DOCTYPE html>
<html>
<head>
  <title>
    CSS | image-rendering
  </title>
  <style>
    .image-crisp {
      /* Using the crisp-edges
      value for demonstration */
      image-rendering: crisp-edges;
    }
  
    .image-auto {
      image-rendering: initial;
    }
  </style>
</head>
<body>
  <h1 style="color: green">
    GeeksforGeeks
  </h1>
  <b>
    CSS | image-rendering
  </b>
  <p>
    Comparing the "crisp-edges"
    value with the "initial"
    value in Firefox
  </p>
  <div class="container">
    <img class="image-crisp" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"
     width="250px">
    <img class="image-auto" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20191202010422/eg-image.png"
     width="250px">
  </div>
</body>
</html>

Output: Comparing the crisp-edges value with the initial value

inherit: It is used to set the property to inherit from its parent element.

Supported Browsers: The browsers supported by image-rendering property are listed below:

Chrome
Firefox
Safari
Opera

CSS

CSS | свойство рендеринга изображений

РЕКОМЕНДУЕМЫЕ СТАТЬИ