html - html中srcset属性的w和px

Question

在 html 中 img 元素的 srcset 属性中，我们可以指定每个源的宽度或像素密度。我们使用 w 来指定宽度，使用 x 来指定像素密度。我有一些关于 w 和 x 的问题。

1. 500w是否意味着图像的宽度为500像素？如果是这样，为什么在 size 属性中使用的是 w 而不是 px？

2. 1x是否意味着72pixels/inch的像素密度

3. 为什么图像具有像素密度？我认为像素密度是指物理长度/空间内的像素数。例如，每英寸的像素数。但是数字图像不占用物理长度/空间，它只占用一些像素。那么数字图像的像素密度是什么意思？...这是我的猜测，如果我猜对了，请告诉我：图像只占用多个像素，但它可能是为了物理长度而设计的。例如，一个 144 像素宽度的按钮图像打算占据 1 英寸的物理空间。因此，它适用于 2x 的设备。我们通过在 srcset 属性中指定 2x 来告诉浏览器。总而言之，像素密度是指图像所针对的系统的像素密度。

标签： htmlimagesrcsetpixel-density

Answer 1

#1。出现在标记属性中'w'列出的每个文件右侧的值称为“w 描述符”。每个描述符的值是与描述符关联 的文件的固有宽度（以像素为单位） 。“固有宽度”是指图像最初创建时或上次更改宽度时的原始宽度。 您可以在 Photoshop 或 Windows 10 照片查看器中查看文件的固有宽度（单击三点菜单“...”并选择文件信息）。“px”不用于描述固有宽度，因为它用于描述各种其他类型的图像宽度。这srcset<img>'w''w''w'描述符描述了以像素为单位测量的特定类型的图像宽度 - 固有宽度 -并且仅与标记的srcset属性一起使用<img>。

#2。“1x”并不意味着每英寸 72 像素的像素密度。那是因为像素密度不是设备分辨率。像素密度是以像素为单位的浏览器图像宽度（称为“CSS 像素”）与设备显示屏的本机像素宽度之比。像素密度与设备分辨率无关。

#3。图像没有像素密度。它只有两种类型的宽度测量 - 都以像素为单位。一种宽度度量是浏览器显示图像的宽度。另一个宽度度量是图像的固有宽度（参见#1）。例如，假设我有一个内在宽度为 800 像素宽的图像。还假设浏览器以 650 像素宽显示图像。这两个测量值没有任何关系（这不是像素密度！） - 它们只是查看图像的两种不同方式，导致两种不同的宽度测量值。

我已经直接回答了你的问题，没有任何其他背景或解释，我敢肯定你在挠头说：“那没有帮助！” 这与我第一次开始自学<img>浏览器如何选择和显示内联图像（在 HTML 中使用标签指定的图像）时的反应完全相同。 我建议您阅读这篇文章，以开始全面了解如何在 HTML 标记中指定内联图像以及浏览器如何从标记的srcset属性中选择合适的图像<img>。在这个主题成为焦点之前，你可以期待几周的学习。当你完成对内联图像的掌握后，背景图片等你掌握一套完全不同的规则。:>)