大小問題使用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; 
}