Html 具有流体宽度和固定高度的SVG图像（随页面拉伸/收缩，但保持高度）

我有一个SVG图像，我正试图在我的页面中使用它，我想用它来扩展页面。使用非SVG图像的CSS不适用于SVG。如这里的快速小提琴所示->

我的HTML

<img src="image.svg" id="topHeader">

我在CSS中尝试了不同的东西，但似乎没有任何效果。当我缩小页面时，图像的宽度确实会变小，但高度不会保持不变，高度会随着宽度均匀收缩

有没有人知道一种解决方案，它不涉及将SVG换成PNG或JPEG

试试这个：

只要在周围放一个设定高度的div

html
    <div id="test">
     Your Image
    </div>
css 
    #test{
    height:"60px;
    }

html
你的形象
css
#试验{
高度：“60px；
}

通过将其设置为div的背景图像并使用背景大小css，您可能会获得与所需相同的效果

background:url(http://www.adobe.com/inspire-apps/exporting-svg-illustrator-0913/fig14/img/napoleon%20for%20svg%201.svg) left top no-repeat;
background-size:100% 100%;

---

（这就是说，Mark的解决方案在Chrome中对我来说效果很好）

如果您尝试将其设置为背景图像会怎么样？如果您在图像上设置最小高度会怎么样？大多数情况下都会发生相同的情况。最小高度也不起作用。我也尝试过在图像周围使用环绕div，但也没有任何效果。不确定小提琴是否对您有效，但它似乎对我无效，o在我的html文件中。

background:url(http://www.adobe.com/inspire-apps/exporting-svg-illustrator-0913/fig14/img/napoleon%20for%20svg%201.svg) left top no-repeat;
background-size:100% 100%;