在图像尺寸上使用 rem、em 和 px

Question

我正在寻找有关这些单位在图像尺寸上的使用的一些解释，但找不到任何解释。我在一些地方读到忘记像素并仅使用 rem/em，但我不知道它是否也适用于图像尺寸（宽度/高度）。

例如，在下面的这种情况下我应该使用哪一个？

<img src="https://i.imgur.com/NReN4xE.png" style="width: 5rem;" />5rem<br>
<img src="https://i.imgur.com/NReN4xE.png" style="width: 5em;" />5em<br>
<img src="https://i.imgur.com/NReN4xE.png" style="width: 100px;" />100px<br>

Answer 1

• px渲染像素值
• rem使用根元素 ( html) 并以其font-size为基础（默认为 16px）来计算其大小，因此基本上您的值rem是img乘以font-sizehtml
• em使用带有 a 的第一个父级font-size来计算它需要渲染的大小（计算方式与rem上面相同 - 父级计算px值乘以您的em）。em如果父级在其 中使用，子级将使用父级的font-size计算/计算。font-size

解释可能很难理解（尤其是em），请看这里：https ://jsfiddle.net/6ydf931w/

在大多数情况下，我倾向于避免em在几乎所有事情上使用它，因为如果您不永久了解它的使用位置，可能会导致意想不到的结果。

我通常会限制rem文本，以防需要全局更改。

px是非常可预测的，如果这对你有用，那么使用它并没有什么坏处。