如何在浏览器以原始分辨率（1图像像素=1设备像素）显示PNG？

刚好之前研究过高DPI设备下像素完美显示的问题，给你分享两种靠谱方案——先讲你最关心的纯CSS无JS方案，再补充适配性更强的JS方案。

纯CSS方案：无需JS，直接生效 #

要实现1图像像素对应1设备像素，核心是抵消浏览器的自动缩放，同时保证像素不被模糊处理。我们可以利用CSS的媒体查询结合image-rendering属性来实现：

/* 基础样式：确保像素缩放时不模糊 */
img.pixel-perfect {
  image-rendering: pixelated;
  image-rendering: crisp-edges; /* 兼容Chrome/Edge旧版本、Safari */
}

/* 针对DPR=2的设备（比如大部分Retina屏） */
@media (min-resolution: 2dppx) {
  img.pixel-perfect {
    transform: scale(0.5);
    transform-origin: top left; /* 固定左上角，避免偏移 */
  }
}

/* 针对DPR=3的设备（比如部分安卓高分辨率屏） */
@media (min-resolution: 3dppx) {
  img.pixel-perfect {
    transform: scale(calc(1/3));
    transform-origin: top left;
  }
}

/* 可根据需要补充DPR=4的情况 */
@media (min-resolution: 4dppx) {
  img.pixel-perfect {
    transform: scale(0.25);
    transform-origin: top left;
  }
}

原理很简单：当设备DPR为2时，浏览器会把1个CSS像素渲染成2个物理设备像素。我们把图片缩小到原来的1/2，这样图片的每个原始像素就刚好对应1个设备像素。image-rendering属性是关键，它能防止浏览器对缩放后的图片做平滑处理，保持像素风格的锐利感。

这种方案的好处是完全不需要JS，页面加载后立即生效；缺点是需要预先针对常见的DPR值写媒体查询，不过目前主流设备的DPR就是2、3、4，基本能覆盖绝大多数场景。

JavaScript方案：适配任意DPR，动态处理 #

如果需要覆盖所有可能的DPR值（比如一些特殊设备的非整数DPR），那JS方案会更灵活。它能动态获取当前设备的DPR，然后计算出图片的正确CSS尺寸：

// 给需要像素完美显示的图片加上pixel-perfect类
document.querySelectorAll('img.pixel-perfect').forEach(img => {
  // 确保图片加载完成后再处理，避免获取不到原始尺寸
  if (img.complete) {
    adjustPixelPerfect(img);
  } else {
    img.addEventListener('load', () => adjustPixelPerfect(img));
  }
});

function adjustPixelPerfect(img) {
  const dpr = window.devicePixelRatio || 1; // 获取设备像素比，默认1
  const originalWidth = img.naturalWidth; // 图片原始宽度（图像像素）
  const originalHeight = img.naturalHeight; // 图片原始高度

  // 设置CSS尺寸为原始尺寸除以DPR，确保1图像像素=1设备像素
  img.style.width = `${originalWidth / dpr}px`;
  img.style.height = `${originalHeight / dpr}px`;

  // 同样开启像素锐利渲染
  img.style.imageRendering = 'pixelated';
  img.style.imageRendering = 'crisp-edges';
}

这个方案的优势是不管设备的DPR是多少（比如1.5、2.75这种特殊值），都能精准适配。你可以把这段代码放在<head>里，或者内联在图片标签后面，尽量减少等待时间，让图片尽快以正确的比例显示。

两种方案对比 #

• 纯CSS：适合追求无JS依赖、覆盖主流设备的场景，加载即生效。
• JS：适合需要适配所有DPR值的场景，灵活性拉满，只是需要一点点JS执行时间。

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