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

Question

我有一个徽标图像，当用户向下滚动时，其宽度会减小，并在向上滚动时重新获得。问题是它在转换之后失去了抗锯齿：

之前
后

（原谅它下方的线条，这只是导航栏的其余部分）

这似乎只发生在Chrome中。

Logo的css

// "foo=val1&bar=baz%foo=val2"
location = /test {
   content_by_lua_block {
     local args = ngx.req.get_uri_args()
     local qs = {}
     for key, val in pairs(args) do
         if type(val) == "table" then
             table.insert(qs, key.."[]" .. table.concat(val, key.."[]"))
         else
             table.insert(qs, val)
         end
     end
     // qs = { foo[] = {"val1", "val2"}, bar = "baz" }
     ngx.req.set_uri_args(qs)
   }
   // "foo[]=val1&foo[]=val2&bar=baz"
}

小徽标类的CSS，在向下滚动时被Javascript添加并在上面删除

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

我已经尝试过其他一些有类似问题的其他线程，似乎没什么用。任何帮助表示赞赏。

Answer 1

也许你可以尝试使用transform：scale（Xdeg）;或者将图像文件类型更改为svg？好吧，不确定这是否会起作用

编辑*

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

Answer 2

试试image-rendering。 Chrome中支持“自动”属性。

img {
  image-rendering: auto;
}