javascript - PNG 图像在 css 宽度转换后失去抗锯齿

Question

我有一个 Logo 图像，当用户向下滚动时，它的宽度会减小，而当他们向上滚动时，它会恢复宽度。问题是它在像这样转换后失去了抗锯齿:

之前

之后

(请原谅它下面的几行，那只是导航栏的其余部分)

这似乎只发生在 Chrome 中。

Logo 的 CSS

.logo {
  padding: 10px;
  margin-left: 100px;
  width: 350px;
  -webkit-transition: width 0.3s;
  transition: width 0.3s;
}

在向下滚动时由 Javascript 添加并在向上滚动时删除的小 Logo 类的 css

.header-top-mini .logo {
    width: 200px;
}

我已经尝试了这里的其他一些有类似问题的线程，但似乎没有任何效果。感谢您的帮助。

Answer 1

也许你可以尝试使用 transform: scale(Xdeg);或将图像文件类型更改为 svg？好吧，不确定这是否能解决问题

编辑*

只是一些关于 svg 缩放的附加信息 https://css-tricks.com/scale-svg/