css: fit rounded (circle) image (do not stretch it)

Question

For example I have such images:

and css:

.company-header-avatar{     width: 60px;     height: 60px;     -webkit-border-radius: 60px;     -webkit-background-clip: padding-box;     -moz-border-radius: 60px;     -moz-background-clip: padding;     border-radius: 60px;     background-clip: padding-box;     margin: 7px 0 0 5px;     float: left; } 

As the result I get:

But they are stretched. Are there any ways to make them rounded, but without stretching? (for example, get part from middle, etc)

Fiddle:

http://jsfiddle.net/73h7try9/

Answer 1

I recommend applying the images with background-image to a div and then applying background-size: cover to ensure the ratio stays correct regardless of the image's original size/ratio:

JS Fiddle

HTML

<div class="company-header-avatar" style="background-image: url(https://dl.dropboxusercontent.com/u/59666091/6E06C3D.jpeg)"></div>  <div class="company-header-avatar" style="background-image: url(https://dl.dropboxusercontent.com/u/59666091/8WluhcUlWl8.jpg)"></div> 

CSS

.company-header-avatar{     width: 60px;     height: 60px;     -webkit-border-radius: 60px;     -webkit-background-clip: padding-box;     -moz-border-radius: 60px;     -moz-background-clip: padding;     border-radius: 60px;     background-clip: padding-box;     margin: 7px 0 0 5px;     float: left;     background-size: cover;     background-position: center center; }