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

列印頁面