CSS - image-rendering 属性

CSS 的 image-rendering 属性用于控制浏览器如何渲染或显示图像。它指定浏览器在放大或缩小图像时以及在以非图像固有尺寸倍数的大小显示图像时应使用的算法。

语法

image-rendering: auto | smooth | high-quality | crisp-edges | pixelated | initial | inherit;

属性值

值	描述
auto	允许浏览器使用合适的缩放算法。默认值。
smooth	使用平滑图像中颜色的算法。
high-quality	类似于 smooth，但更重视高质量缩放。
crisp-edges	使用一种算法来保留图像的对比度、颜色和边缘，而无需任何平滑或模糊。
pixelated	使用一种算法在缩放图像时应用像素化效果，这可以产生复古或低分辨率的外观。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

CSS 图像渲染属性示例

以下示例使用不同的值解释了 image-rendering 属性。

使用 Auto 值的图像渲染属性

为了允许浏览器根据图像和上下文自动确定最佳渲染方法，我们使用 auto 值。此默认设置在质量和性能之间取得平衡，并适应图像的分辨率和缩放要求。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         width: 120px;
      }

      .demoImg {
         image-rendering: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS image-rendering property
   </h2>
   <h4>
      Original image:
   </h4>
   <img src="/css/images/scancode.png" alt="none">
   <h4>
      image-rendering: auto
   </h4>
   <img class="demoImg" src="/css/images/scancode.png" alt="auto">

</body>

</html>

使用 Smooth 值的图像渲染属性

为了在缩放图像时优先考虑平滑度，以便浏览器应用抗锯齿技术以最大程度地减少锯齿状边缘并保留图像在各种尺寸下的视觉吸引力，我们使用 smooth 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         width: 120px;
      }

      .demoImg {
         image-rendering: smooth;
      }
   </style>
</head>

<body>
   <h2>
      CSS image-rendering property
   </h2>
   <h4>
      Original image:
   </h4>
   <img src="/css/images/scancode.png" alt="none">
   <h4>
      image-rendering: smooth
   </h4>
   <img class="demoImg" src="/css/images/scancode.png" alt="auto">

</body>

</html>

使用 High Quality 值的图像渲染属性

为了允许浏览器提供尽可能好的图像质量，这涉及复杂算法和更高的计算资源，以确保在调整图像大小时尽可能保留图像的细节和清晰度，我们使用 high-quality 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         width: 120px;
      }

      .demoImg {
         image-rendering: high-quality;
      }
   </style>
</head>

<body>
   <h2>
      CSS image-rendering property
   </h2>
   <h4>
      Original image:
   </h4>
   <img src="/css/images/scancode.png" alt="none">
   <h4>
      image-rendering: high-quality
   </h4>
   <img class="demoImg" src="/css/images/scancode.png" alt="auto">

</body>

</html>

使用 Crisp Edges 值的图像渲染属性

清晰、轮廓分明的边缘，而不是平滑的过渡，我们使用 crisp-edges 值。它保持每个像素的清晰度，这可以增强具有硬边缘的图像的视觉效果。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         width: 120px;
      }

      .demoImg {
         image-rendering: crisp-edges;
      }
   </style>
</head>

<body>
   <h2>
      CSS image-rendering property
   </h2>
   <h4>
      Original image:
   </h4>
   <img src="/css/images/scancode.png" alt="none">
   <h4>
      image-rendering: crisp-edges
   </h4>
   <img class="demoImg" src="/css/images/scancode.png" alt="auto">

</body>

</html>

使用 Pixelated 值的图像渲染属性

为了允许图像以块状、低分辨率的外观渲染，其中每个像素都清晰可见，我们使用 pixelated 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         width: 120px;
      }

      .demoImg {
         image-rendering: pixelated;
      }
   </style>
</head>

<body>
   <h2>
      CSS image-rendering property
   </h2>
   <h4>
      Original image:
   </h4>
   <img src="/css/images/scancode.png" alt="none">
   <h4>
      image-rendering: pixelated
   </h4>
   <img class="demoImg" src="/css/images/scancode.png" alt="auto">

</body>

</html>

支持的浏览器

属性
image-rendering	41.0	79.0	65.0	10.0	28.0

css_properties_reference.htm

打印页面