使用rem设置图片尺寸时1rem被识别为1px的问题求助

核心原因 #

HTML原生的<img>标签的width和height属性（即写在标签内的内联属性）不支持rem、em这类相对单位，浏览器会直接把带rem的数值当成无单位的px值处理——比如你写的16rem会被解析成16px，这就是图片显示尺寸远小于预期的原因。而字体、div的rem缩放正常，是因为它们的尺寸/字号都是通过CSS属性设置的，CSS完全支持rem单位。

解决方案 #

把图片的宽高设置移到CSS里，有两种简单方式：

1. 内联CSS样式
   直接在img标签里用style属性定义尺寸：

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

2. 类选择器（推荐）
   在样式表中定义通用类，方便复用：

.pixel-art {
  width: 16rem;
  height: 12rem;
  /* 可选：保持像素艺术的清晰度 */
  image-rendering: pixelated;
}

然后在img标签中引用类：

<img src="image.png" class="pixel-art">

额外提示 #

如果需要保持图片原始比例，可以只设置width或height中的一个，另一个设为auto，浏览器会自动按比例缩放：

.pixel-art {
  width: 16rem;
  height: auto;
}

内容的提问来源于stack exchange，提问作者Nate Kite