Windows系统缩放导致HTML图片模糊的非srcset解决方法

问题背景 #

Windows 10系统设为125%显示缩放时，仅用<img src="example.png">的页面中，图片仅在浏览器缩放至80%（1/1.25）时才清晰，Firefox、Chrome、Edge均存在此问题。直接给同一张图片加srcset="example.png 1.25x"会导致100%系统缩放的用户看到异常放大的图片，因此需要通用适配方案。

可行解决方案 #

1. 多分辨率srcset适配（最优） #

提供对应不同设备像素比的图片版本，让浏览器自动匹配：

<img src="example.png" 
     srcset="example.png 1x, example@1.25x.png 1.25x, example@2x.png 2x">

• 1x对应系统缩放100%的设备
• 1.25x对应125%缩放的设备
• 额外提供2x可覆盖高DPI屏幕场景

2. JS检测+CSS动态修正 #

若无法提供多分辨率图片，可通过JS检测设备像素比，仅对125%缩放的设备应用修正：

const dpr = window.devicePixelRatio;
if (dpr === 1.25) {
  document.querySelectorAll('img').forEach(img => {
    Object.assign(img.style, {
      transform: 'scale(0.8)',
      transformOrigin: 'top left',
      imageRendering: 'crisp-edges'
    });
  });
}

CSS的image-rendering: crisp-edges可提升缩放后的清晰度，transform: scale(0.8)抵消系统125%缩放带来的放大。

3. Viewport元标签强制渲染 #

在<head>添加以下标签，强制浏览器按实际像素渲染图片，但可能影响页面响应式布局：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

最小复现示例（MRE） #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
  </head>
  <body>
    <img src="example.png">
  </body>
</html>

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