jquery - 使用 png 作为 svg 的后备时的大小问题

Question

好的，我在 svg 方面遇到了一些问题......

我目前正在使用 modernizr 脚本作为旧 IE 版本的后备，它将 svg 交换为 png 扩展。

唯一的问题是我使用宽度来控制 svg 大小:

<img src="img/testing.svg" width="200px">

(但从长远来看，我不会把宽度放在那里，我会把它放在 CSS 中用于媒体查询，以便它可以放大和缩小)

目前我正在使用这个 modernizr 脚本:

if(!Modernizr.svg) {
  $('img[src*="svg"]').attr('src', function() {
      return $(this).attr('src').replace('.svg', '.png');
  });
}

当我在 Ie 中对其进行测试时，它工作得很好并且它正在换出它没问题，但我确实注意到的一件事是，如果例如我的 png 是“200px 宽”并且在我的 css 中我已经声明了 svg 版本为“400px 宽”- 它正在放大我的 png，导致模糊。

我想我的问题是如何阻止 png 放大到超过其原始大小以防止像素化？

或者是否有更好的方法来处理 svg 和 png 后备？

谢谢

Answer 1

您还没有发布您的 CSS。但是你可能正在使用 img { max-width: 100%; } ?

要防止 PNG 缩放，您可以尝试这样做:

img[src$=".png"] {
  max-width: none;
}