Question

我有一个SVG图像，我试图在我的页面中使用，我想用页面拉伸。与非SVG图像一起使用的相同CSS对SVG不起作用。正如在这里的快速小提琴中看到的那样 - ＆gt; http://jsfiddle.net/TUby3/

我的HTML

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

我的CSS

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

我在CSS中尝试过不同的东西，但似乎无法正常工作。当我缩小页面时，图像的宽度确实变小但高度不会保持固定，高度与宽度一致收缩。

有没有人知道这个解决方案，不涉及交换PNG的PNG或JPEG？

Answer 1

试试这个：

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

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

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

Answer 2

你可以通过将它作为背景图像设置为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中运行良好）

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

2 个答案: