HTML引入高分辨率logo显示模糊 如何保持图片高清效果

高分辨率原图未设宽高直接引入仍显示模糊，核心原因只有两个：一是图片被父元素的CSS规则强制拉伸/压缩变形，二是高DPI（Retina/2K/4K）屏幕下1个CSS逻辑像素对应多个物理像素，图源像素密度不足被浏览器自动放大导致发虚。
按以下步骤操作即可保证所有设备下Logo始终清晰：

• 首先给Logo明确设置固定显示尺寸，杜绝变形
  你现有代码里的img标签只加了外边距样式，没有定义显示尺寸，很容易被导航栏的父容器规则拉扯变形。直接给图片加你需要的实际显示宽度，高度设为auto锁定原图比例即可，示例代码：

  <img style="margin-bottom: 10px; width: 140px; height: auto;" src="img/logo.png" alt="网站Logo">
  

  注意：上面的width: 140px要替换成你导航栏实际需要的Logo显示宽度，不要直接照搬数值。
• 适配高DPI屏幕，解决高清屏下的发虚问题
  如果你设置的显示宽度是140px，就算你原图是140px宽，在2倍屏、3倍屏上还是会糊——这类屏幕1个CSS像素对应2~3个物理像素，需要匹配更高分辨率的图源：
  1. 导出2套额外的高清图：按你设置的显示宽度为基准，导出2倍宽（比如显示140px就做280px宽）的图命名为logo@2x.png，3倍宽（420px宽）的图命名为logo@3x.png，和原有logo.png放在同一个img目录下
  2. 给img标签加srcset属性，让浏览器自动根据设备像素比加载对应清晰度的图片，修改后的完整img代码如下：

  <img 
    style="margin-bottom: 10px; width: 140px; height: auto;"
    src="img/logo.png"
    srcset="img/logo@2x.png 2x, img/logo@3x.png 3x"
    alt="网站Logo"
  >
  

  改完之后普通1倍屏加载基础1倍图，Retina/高清PC/手机屏自动加载2倍、3倍图，不会出现像素不足导致的发虚。
• 额外排查项
  检查你的全局CSS里有没有给#logo_home img、.navbar-header img这类选择器设置强制宽高规则，比如写了width: 100%但父容器宽度波动、或者单独给了固定高度没锁比例，这类规则会把图片拉歪变糊，直接删掉这类冲突规则即可。

最一劳永逸的方案：把Logo导出为SVG矢量格式，矢量图不存在像素概念，不管放大缩小到任何尺寸都不会糊，直接把src路径换成SVG文件路径即可，不需要做多套图也不需要写srcset，适配所有设备。

内容的提问来源于stack exchange，提问作者Nayara Cassamá