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

Question

W3C 文档声明如下：

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

这种方式适用于标准元素，例如 div 和表格。如果屏幕具有更大的像素密度，则为 CSS 像素保留更多的实际像素，以保持所有屏幕上的实际元素尺寸大致相等，而不管它们的密度。从这个意义上说，CSS 像素可以看作是一种伪绝对长度度量。

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

Answer 1

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

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

但是，如果您的图像的分辨率低于您的屏幕，并且如果显卡无法完成这项工作，那么您的图像会显得更小，因为它没有足够的像素来填充您的实际屏幕分辨率。

如您所见，显卡将始终强制使用中间色，即两种颜色之间的中间色。

很明显，如果你的图像如果是全黑像素，黑黑中间的颜色就是黑色，所以图像不会显得拉伸。