Resizing a div with locked aspect ratio

by Adrianne Williams

HTML

<div id="instrument" class="fifty">
    <div id="measure" class="resizable">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
           <circle cx="100" cy="100" r="50" stroke="black" stroke-width="3" fill="none" ></circle>  
      </svg> 
    </div>
</div>

CSS

.resizable {
    background: lightgrey;
    resize: both;
    overflow: auto;
}

.fifty {
    width: 200px;
}
svg {
    height: 200px;
    width: 200px;
}