调整图像大小时 1rem 显示为 1px

【问题标题】：1rem displaying as 1px when sizing an image调整图像大小时 1rem 显示为 1px
【发布时间】：2022-07-29 07:57:42
【问题描述】：

我目前正在尝试构建一个网站，其中包含一个放大到更大的小像素艺术图像，并且根据互联网的建议，我正在使用 rem 来确保所有内容都可以很好地调整大小。

但是，我在调整图像大小时遇到了问题。当我尝试调整它的大小时，它会将 1 rem 视为等于 1 px。所以下面的代码会显示为 16px x 12px 的图片：

<img src="image.png" width="16rem" height="12rem">

发生了什么事？根据我读过的所有内容，它应该显示为 256 x 192 像素的图像。我的字体和 div 的大小都与我预期的完全一样，所以我不知道为什么我的图像会出现问题。

谢谢！

【问题讨论】：

【解决方案1】：

<img> 标签内的height 和width 属性始终以像素为单位进行测量——实际上，您通常不会在这些属性中写单位——只是数字。

要实现您想要的，请使用 CSS 样式表（其中包含适用于 <img> 标记的类或 ID 的规则），或使用 img 标记内的 style 属性，例如：

<img src="image.png" style="width:16rem;height:12rem;">

P.S.：您写道“根据互联网的建议，我正在使用 rem 来确保一切都很好地调整大小”：我不知道哪个“互联网”向您推荐了这个 ;-)，但是——如果有的话——它只适用于某些事物（首先是字体大小），而不适用于所有事物，尤其是不适用于图像。

【讨论】：