html中的圖像已被預處理？

我使用img標記在html中顯示不同大小的圖像。其中一幅圖像是267x168，另一幅是1068x672。兩幅圖像相同但大小不同。假設較小的圖像將被混疊，因爲它已經以50％的寬度顯示。但他們兩個看起來都一樣。圖像在顯示之前是否被預處理？如果是，如何禁用它？html中的圖像已被預處理？

<!DOCTYPE html> 
<html> 
    <body> 
     <h1>Result Comparison</h1> 

     <style> 
      img { 
       width:100%; 
      } 

      td{ 
       border: 1px solid black; 
       padding:1%; 
      } 
     </style> 

     <table style="width:100%"> 
      <col width="50%"> 
      <tr> 
       <td align="center"><a href="original.png"><img src="original.png" width=50%/></a>Original (size)</td> 
       <td align ="center"><a href="bicubic.png"><img src="bicubic.png"/></a>Bicubic (size)</td> 
      </tr> 
      <tr> 
       <td align="center"><a href="average.png"><img src="average.png"/></a>Average (size)</td> 
       <td align ="center"><a href="median.png"><img src="median.png"/></a>Median (size)</td> 
     </table> 
    </body> 
</html>

來源

2017-07-18 SamTew

如果您不顯示代碼，我們怎麼知道？它看起來像從父代繼承樣式。 – Berkay

@Berkay Code添加。對於那個很抱歉。 – SamTew

給我們一個截圖可能嗎？這聽起來像你想知道爲什麼兩個不同大小的圖像顯示時相同的大小相同。 – Clonkex

當您調整圖像大小，一些處理必須發生。調整大小的軟件（即圖像編輯程序或瀏覽器）必須通過某種方式刪除像素或添加它們。它使用圖像過濾器算法執行此操作。一些常見的是點，線性/雙線性和立方/雙立方。

在大多數圖像編輯程序中，您可以選擇使用哪種類型的過濾器，但瀏覽器會爲您決定。幸運的是，它看起來像你可以有一些控制;基於this page的信息，它看起來像你可以添加一個CSS規則來獲得像素化的外觀，就像這樣：

img { 
    image-rendering: pixelated; 
}

然而，這是值得注意的是，讓你不得不像素化的外觀根據this page，對某些瀏覽器使用不同的規則。在Chrome中，pixelated有效，但不是crisp-edges。這與Firefox相反。

來源

2017-07-18 06:51:49 Clonkex

html中的圖像已被預處理？

回答

相關問題