title: How to maintain dimension of non-square image in a round image container
body: <p>I am creating a round avatar in the user's profile and intend to set the user's image in the round avatar container.</p>
  
  <p>If the image is a square there will not be an issue</p>
  
  <p><img src="https://i.stack.imgur.com/sZS9g.png" alt="enter image description here"></p>
  
  <p>However, I was not able to constraint an image which is not a square image for example for this non-square image</p>
  
  <p><img src="https://i.stack.imgur.com/MFao1.png" alt="enter image description here"></p>
  
  <p>I will get this result</p>
  
  <p><img src="https://i.stack.imgur.com/BZRC1.png" alt="enter image description here"></p>
  
  <p>This is the CSS code I am using</p>
  
  <pre><code>.avatar_container {
    display: inline-block;
    width: 25%;
    max-width: 110px;
    overflow: hidden;
  }
  .avatar_container img {
    border-radius: 50%;
  }
  </code></pre>
  
  <p>What can I do to always maintain a round avatar? And that the image in it won't be distorted? overflow should be hidden</p>