CSS |图像渲染属性

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

句法：

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

属性值：

• auto：用于表示缩放算法将依赖于用户代理。不同的浏览器可能有不同的算法。

  例子：

  
  
  
    
    
  
  
    
  
      GeeksforGeeks
    
    
      CSS | image-rendering
    
    
  
      Comparing the 'crisp-edges'
      value with the 'auto' value
      in Firefox
    
    
  
      
      
    
  
  
  

  输出：比较清晰边缘值与自动值
  

• 清晰边缘：用于指示算法将保留图像中的对比度和边缘。由于使用了抗锯齿，它不会平滑颜色或模糊图像。这里使用的一些算法是最近邻算法和其他非平滑缩放算法。

  例子：

  
  
  
    
    
  
    
  
    
  
      GeeksforGeeks
    
    
      CSS | image-rendering
    
    
  
      Comparing the 'auto' value
      with the 'crisp-edges' value
      in Firefox
    
    
  
      
      
    
  
  
  

  输出：将自动值与清晰边缘值进行比较
  

• 像素化：用于表示在放大图像时对图像使用最近邻算法。当图像缩小时，行为与自动值相同。

  例子：

  
  
    
  
    
    
  
    
  
    
  
      GeeksforGeeks
    
    
      CSS | image-rendering
    
    
  
      Comparing the 'crisp-edges'
      value with the 'pixelated'
      value in Firefox
    
    
  
      
      
    
  
  
  

  输出：比较清晰边缘值与像素化值
  

• initial：用于将属性设置为其默认值。
  例子：

  
  
  
    
    
  
  
    
  
      GeeksforGeeks
    
    
      CSS | image-rendering
    
    
  
      Comparing the 'crisp-edges'
      value with the 'initial'
      value in Firefox
    
    
  
      
      
    
  
  
  

  输出：将清晰边缘值与初始值进行比较
  

• 继承：用于设置从其父元素继承的属性。

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

• 铬合金
• 火狐
• 苹果浏览器
• 歌剧