如何在Web浏览器中处理图像像素？

Question

W3C文档说明如下：

  

像素（px）相对于观看设备。对于低dpi设备，1px是显示器的一个设备像素（点）。对于打印机和高分辨率屏幕，1px意味着多个设备像素。

这种对标准元素有意义，比如div和table。如果屏幕具有更大的像素密度，则为CSS像素保留更多真实像素，以便在所有屏幕上保持实际元素尺寸大致相等，而不管其密度如何。从这个意义上讲，CSS像素可以看作伪绝对长度度量。

但是图像怎么样？我知道让浏览器调整图像大小是不好的做法。但那么如何处理源图像的像素？我认为它不能与其他元素相同，否则我会在高密度屏幕上获得低分辨率图像，因为更多的设备像素被分配给单个图像像素。

Answer 1

如果图像的分辨率低于屏幕的分辨率，图形卡将添加像素以使图像填充所需的像素。

因此，如果您的图像具有与屏幕相同的分辨率，则图像的每个像素都会在屏幕的每个像素中呈现。

但是如果你的图像的分辨率低于你的屏幕，并且图形卡不能完成这项工作，你的图像会显得更小，因为它没有像素来填满你的实际屏幕分辨率。

正如您所见，图形卡将始终强制使用中间颜色，这是两种颜色之间的介质。

显然，如果你想象一个完整的黑色像素，黑色 - 黑色的中间颜色是黑色的，那么图像就不会出现拉伸。