这个问题我在做项目时碰到过好多次，核心原因要么是图片本身分辨率不足，要么是浏览器对transform: scale的渲染优化没跟上，给你几个针对性的解决方案：

1. 先确保Logo图片的分辨率足够 #

你现在的Logo是通过max-width:55%来控制显示尺寸的，那图片的实际像素宽度至少要达到「显示宽度的2倍」（适配Retina等高DPI屏幕）。比如如果页面上Logo显示时最大宽度是200px，那图片本身得有400px以上的宽度，这样缩放时才不会因为拉伸导致模糊。

2. 优化CSS渲染属性，开启硬件加速 #

修改你的CSS，添加几个能提升渲染质量的属性，让浏览器用GPU来处理缩放，减少模糊：

#logo a {
  display: inline-block;
  max-width: 55%;
  transform: scale(.95);
  /* 合并前缀，现在主流浏览器已支持标准transition */
  transition: all 0.2s ease-in-out;
  /* 添加渲染优化属性 */
  transform-origin: center center; /* 从中心缩放，避免边缘变形模糊 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  image-rendering: crisp-edges; /* 强制清晰渲染 */
  image-rendering: -webkit-optimize-contrast; /* 针对Chrome/Safari的优化 */
}

#logo a:hover {
  transform: scale(1);
}

这些属性的作用：

• transform-origin: center center：确保缩放从Logo中心开始，避免边缘区域因为拉伸过度模糊；
• backface-visibility和perspective：触发浏览器的GPU硬件加速，让缩放的渲染更平滑清晰；
• image-rendering系列属性：强制浏览器以更清晰的方式渲染图片，减少缩放时的模糊感。

3. 改用宽度过渡替代transform缩放（备选方案） #

如果你还是觉得模糊，可以放弃transform: scale，改用max-width的过渡来实现放大效果，这种方式是直接调整元素尺寸，不会有transform的渲染问题：

#logo img {
  max-width: 95%;
  transition: max-width 0.2s ease-in-out;
}

#logo a:hover img {
  max-width: 100%;
}

这种方法的缺点是性能略逊于transform（因为会触发重排），但对于Logo这种小元素来说，几乎感知不到差异。

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