I am trying to insert an svg into the .container div that I created using this code snippet. The goal is to make the svg fit perfectly within the dimensions of the .container div, while also scaling proportionally with the page as it is resized:
<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>
For this question, a rectangular svg with a 2:1 aspect ratio would suffice:
<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>
However, when attempting to do this, it distorts the aspect ratio of the .container div. In Chrome, the height of the .container div expands to 100%, which is not the desired outcome.
Thank you for your help!