title: Making a whole image round in shape while maintaining aspect ratio
body: <p>I am trying to display a whole image in a circle form(without cropping or hiding any part of it) while maintaining the aspect ratio.
  I want to use only css.</p>
  
  <p>I tried this:</p>
  
  <pre><code>#propic
  {
  width:150px;
  height:150px;
  background-size:cover;
  display:block;
  border-radius:100px;
  -webkit-border-radius:100px;
  -moz-border-radius:100px;
  }
  </code></pre>
  
  <p>which does show my image in a circle form but doesnt maintain the aspect ratio.
  Again I tried this:</p>
  
  <pre><code>#propic
  {
  width:150px;
  height:auto;
  background-size:cover;
  display:block;
  border-radius:100px;
  -webkit-border-radius:100px;
  -moz-border-radius:100px;
  }
  </code></pre>
  
  <p>which does maintain the aspect ratio but the shape becomes oval.
  How can I achieve this?</p>
  
  <p>Thanks in advance.</p>