首页 文章

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

提问于
浏览 次
3

我有一个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？

html css svg

2 回答

  • 0

    试试这个：

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

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

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

    您可以通过将其设置为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中运行正常）

    回复于

相关问题