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

if you use jquery than check this jsfiddle. : http://jsfiddle.net/73h7try9/2/

you js should:

$('.image_cover').each(function(){
var imageWidth = $(this).find('img').width();
var imageheight = $(this).find('img'). height();
  if(imageWidth > imageheight){
    $(this).addClass('landscape');
  }else{
    $(this).addClass('potrait');
  }
})

your css should :

.company-header-avatar{
    width: 100%;
    height: auto;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
 }
 .landscape .company-header-avatar{ 
    width: auto;
    height: 100%;
 }
 .potrait .company-header-avatar{ 
    width: 100%;
    height: auto;
 }
 .image_cover{ 
    width:60px; 
    height:60px; 
    border-radius:50%; 
    overflow:hidden;
    float: left;    
    margin: 7px 0 0 5px;
 }

your html should: