html - 具有可变宽度和固定高度的 SVG 图像(随页面拉伸(stretch)/收缩但保持高度)

Question

我有一个 SVG 图像，我想在我的页面中使用它，我想用 page.适用于非 SVG 图像的相同 CSS 不适用于 SVG。如此处的快速 fiddle 所示 -> http://jsfiddle.net/TUby3/

我的 HTML

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

我的 CSS

#topHeader {
width: calc(85% + 10px);
height: 46px;
}

我一直在我的 CSS 中尝试不同的东西，但似乎无法使任何东西起作用。当我缩小页面时，图像的宽度确实变小但高度不固定，高度与宽度均匀缩小。

有谁知道不涉及将 SVG 换成 PNG 或 JPEG 的解决方案？

Answer 1

试试这个:

http://jsfiddle.net/TUby3/1/

只需在其周围放置一个具有设定高度的 div。

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