title: CSS - Using Portrait images to display inside a circle without distoring
body: <p>I have the following:-</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="profile-picture"&gt;
    &lt;img src="http://thumb9.shutterstock.com/display_pic_with_logo/239779/154705646/stock-photo-portrait-of-real-man-face-looking-at-camera-on-blue-background-154705646.jpg" alt="Profile - James Hales"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.profile-picture img {
      border-radius: 50%;
      margin-top: 0;
      margin-bottom: 20px;
      height: 392px;
      width: 250px;
  }
  </code></pre>
  
  <p>I want the profile picture to be a perfect circle with the image placed inside. Is there a way to essentially crop the image with CSS so that it would take 'x' amount of pixels off the bottom so that the image displays inside a circle without distorting the image?</p>
  
  <p><a href="https://jsfiddle.net/a41t4qng/" rel="nofollow">JSFIDDLE</a></p>