CODEWITHSUNDEEP
htmlcss
byCoder
byCoder

Reputation: 9184

How can I fit images into circles without stretching?

For example I have such images:

enter image description here enter image description here

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:

enter image description here

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/

Upvotes: 28

Views: 28524

Answers (5)

nateM
nateM

Reputation: 662

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

Upvotes: 0

Kundan
Kundan

Reputation: 1952

This did the work for me.

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

Upvotes: 4

london_utku
london_utku

Reputation: 1312

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

Upvotes: 0

Derek Story
Derek Story

Reputation: 9583

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

Upvotes: 35

Jignesh Kheni
Jignesh Kheni

Reputation: 1302

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>

Upvotes: 1

Related Questions