大小问题使用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浏览器测试，它被交换出去没有PR但我注意到的一件事是，例如，如果我的PNG是“200像素宽”，并且在我的CSS中，我已经说svg版本是“400px宽” - 它会缩小我的PNG，导致模糊。

我想我的问题是如何阻止PNG扩大超出其原始大小，以防止像素化？

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

谢谢

Answer 1

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

为了防止PNG图像缩放而你可以试试这个：

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