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中的图像已被预处理？

回答

相关问题