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

The following CSS is sufficient :

.profile-avatar {
  border-radius: 50%;
}

And the usage in html :

<img class="profile-avatar"  src="{{ user.picture }}" style="width: 1.5em; height: 1.5em;">

Answer 2

This did the work for me.

.company-header-avatar{
  height: 60px;
  width: 60px;
  object-fit: contain;
  border-radius: 50%;
}

Answer 3

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:

 <div class="image_cover">
    <img src="https://dl.dropboxusercontent.com/u/59666091/6E06C3D.jpeg" class="company-header-avatar">
 </div>

<div class="image_cover">
   <img src="https://dl.dropboxusercontent.com/u/59666091/8WluhcUlWl8.jpg" class="company-header-avatar">
</div>

Answer 4

If you are able to wrap the image in an element you could try display:flex and align-items: center on the parent element.

Answer 5

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