CSS image-rendering用法及代码示例

image-rendering属性用于设置用于图像缩放的算法类型。当用户将图像缩放到原始尺寸以上或以下时，可以使用此属性来修改缩放行为。

用法:

shape-rendering:auto | crisp-edges | pixelated | initial | inherit

属性值：

auto:它用于指示缩放算法将取决于用户代理。不同的浏览器可能具有不同的算法。

例：

<!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>

输出：将crisp-edges值与自动值进行比较
auto

crisp-edges：它用于指示算法将保留图像中的对比度和边。由于使用anti-aliasing，它不会使颜色变平滑或使图像模糊。此处使用的一些算法是nearest-neighbor和其他非平滑缩放算法。

例：

<!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>

输出：将自动值与crisp-edges值进行比较

pixelated:它用于指示按比例放大图像时使用nearest-neighbor算法。当图像按比例缩小时，其行为与自动值相同。

例：

<!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>

输出：比较crisp-edges值和像素化值
pixelated

initial:用于将属性设置为其默认值。
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>

输出：将crisp-edges值与初始值进行比较
initial

inherit:它用于将属性设置为从其父元素继承。

支持的浏览器：image-rendering属性支持的浏览器如下所示：

chrome
火狐浏览器
苹果浏览器
Opera

相关用法

注：本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 CSS | image-rendering Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。