我想把一个SVG放在使用以下代码创建的
然而,当我这样做时,会破坏.container div的纵横比。在Chrome中,.container div的高度会扩展到100%,这显然不是我想要的:P
提前感谢!
.container
div中,使其完全适应.container
div的尺寸,同时随着页面大小的调整而缩放。<html>
<body>
<style type='text/css'>
.container
{
position:relative;
width:50%;/*half the width of the whole page*/
margin:auto;/*center the whole thing*/
}
.set_height
{
padding-bottom:50%;/*2:1 aspect ratio*/
position:relative;
float:left;
width:100%;
height:100%;
}
</style>
<div class='container'>
<div class='set_height' style='background-color:blue;'>
</div>
</div>
</body>
</html>
对于这个问题,一个长宽比为2:1的矩形svg就足够了:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="50" stroke="black" fill="red" stroke-width="5"/>
</svg>
然而,当我这样做时,会破坏.container div的纵横比。在Chrome中,.container div的高度会扩展到100%,这显然不是我想要的:P
提前感谢!