具有可变宽度和固定高度的 SVG 图像（随页面拉伸/收缩但保持高度）答案

【问题标题】：SVG image with fluid width and fixed height (stretch/shrink with page but keep height)具有可变宽度和固定高度的 SVG 图像（随页面拉伸/收缩但保持高度）
【发布时间】：2014-06-26 06:14:51
【问题描述】：

我有一个 SVG 图像，我想在我的页面中使用它，我想用页面进行拉伸。适用于非 SVG 图像的相同 CSS 不适用于 SVG。如这里的快速小提琴所示 -> http://jsfiddle.net/TUby3/

我的 HTML

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

我的 CSS

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

我一直在我的 CSS 中尝试不同的东西，但似乎没有任何效果。当我缩小页面时，图像的宽度确实变小了，但高度并没有保持固定，高度与宽度一致缩小。

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

【问题讨论】：

如果您尝试将其设置为背景图片会怎样？
如果在图片上设置最小高度会怎样？
大部分情况下都会发生同样的事情。
最小高度也不起作用。
我也尝试在图像周围使用 wrap div，那里也没有发生任何事情。

标签： html css svg

【解决方案1】：

试试这个：

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

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

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

【讨论】：

不确定该小提琴是否适用于您，但它似乎不适用于我的，或在我的 html 文件中。

【解决方案2】：

通过将其设置为 div 的背景图像并使用 background-size 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 中很适合我）

【讨论】：