Rounded corners on rectangular image using CSS only

object-fit

img{
  width:80px;
  height:80px;
  border-radius: 50%;
  object-fit: cover;
}

<img src="https://picsum.photos/id/1011/800/400">

img with background image

For older browsers, using the <img> tag

<img alt="My image" 
 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
     style="background: url(https://picsum.photos/id/1011/300/180) 50% / cover; 
            border-radius: 50%;
            width:150px;">

The trick is to set a transparent px for the src (to prevent broken image icon) and do the best CSS3 and background-size has to offer (cover).

Is there simple way to achieve this with CSS without distorting the image AND ensuring a circle is perfectly round.

Yes, and you can also avoid using parent elements by just setting the image as the background. You can also position the image as you wish by using the background-position attribute.

Updated to address concerns about size, roundness, skewing and dynamically loaded content.

setTimeout(function() {
	$("#image").css("background-image", "url(https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97350&w=150&h=350)");
}, 3000);

#image {
    display: block;
    background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150");
    border-radius: 200px;
    width: 200px;
    height: 200px;
    background-size: cover;
    background-position: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" />

http://jsfiddle.net/o8fwpug5/37/

This is a slight update of a previous answer. I liked the other answer, but this is a bit more streamlined and gives a pixel based width for the wrapper. This way it is easier to see and change the dimensions for your own purposes.

HTML:

<div><img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" /></div>

CSS:

div{
    height:200px;
    width:200px;
    position:relative;    
    border-radius:100%;
    overflow:hidden;
}
img{
    position:absolute;
    left:-50%; right:-50%; top:0;
    margin:auto;
    height:100%; width:auto;
}

You do that by adding a parent div to your img and the code flows as follows

figure{
    width:150px;
    height:150px;
    border-radius:50%;
    overflow:hidden;
}

Updated Demo