HTML - 像素是如何定义的？

Question

根据我的经验，像素大小是非常相关的，而且基于许多因素有不同的解释。我的问题是，在HTML页面中如何使用像素。

例如，我们可以设置图像的宽度和高度：

<img src="lalala.jpg" width="100px;" height="100px;">

100像素实际上是什么意思？
100像素在屏幕上如何转换？
如果在打印纸张上，100像素如何转换？

更具体地说，如果我将图像大小设置为100像素，那么在不同的屏幕尺寸上，它会是相同的英寸大小吗？如果是这样...如果我在使用不同的屏幕尺寸打印同一页时，它会是相同的大小吗？

- user2484359

---

http://www.w3.org/TR/css3-values/ - DrCopyPaste

请稍等，width和height属性没有单位。 - Raptor

@Raptor 是的，他们会。 - danhardman

@Mr.E 在 HTML 中不会这样。 - sevenseacat

Answer 1

在HTML中，height和width属性的像素长度由CSS控制。在某些情况下，它们被称为“CSS像素”。HTML本身没有提供像素应该代表什么的定义（这就是为什么我在您的问题中添加了css标记的原因）。

CSS本身有自己的单位和值文档，其中在绝对长度部分定义了像素。

5.2. Absolute lengths: the ‘cm’, ‘mm’, ‘in’, ‘pt’, ‘pc’, ‘px’ units

The absolute length units are fixed in relation to each other and anchored to some physical measurement. They are mainly useful when the output environment is known. The absolute units consist of the physical units (in, cm, mm, pt, pc) and the px unit:

unit    definition
----    ----------
‘cm’    centimeters
‘mm’    millimeters
‘in’    inches; 1in is equal to 2.54cm
‘px’    pixels; 1px is equal to 1/96th of 1in
‘pt’    points; 1pt is equal to 1/72nd of 1in
‘pc’    picas; 1pc is equal to 12pt

100像素大约等于1.041英寸，而1.041英寸则大约等于2.65厘米。

关于不同显示器和打印机的问题，我不会进行进一步回答，因为这会使我的回答变得非常冗长和乏味。如果您想自己找到这些答案，一个好的起点是我已经链接的同一文档，该文档详细介绍了参考像素。CSS中的值基于96dpi的值（这意味着在具有96dpi像素密度的监视器上，如果您使用尺子测量，96个像素将等于一英寸）。

- James Donnelly

---

@Raptor 不是的。em 是一种“字体相关单位”而不是“绝对长度”。 - James Donnelly

明白了。我忽略了绝对部分。 - Raptor

@Flynn1179 这意味着您的显示器像素密度大于96dpi。 - James Donnelly

@JamesDonnelly 谢谢你提供的信息！我想知道一个图片应该有多大？我知道在屏幕上应该有多大，但是不确定实际图片应该有多大，举个例子。我知道我想要400像素的宽度。如果这些图片有400像素的宽度，我就可以在屏幕上计算它们。你能帮我吗？ - peni4142

Answer 2

因为每个屏幕的像素大小都不同，HTML/CSS或任何其他软件语言制作出来的东西永远无法匹配物理像素大小。 要计算像素大小，需要硬件机器语言而不是软件。

- nikolaosmparoutis