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;
    -w         


        

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

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;
}