css: phù hợp với tròn (khoanh tròn) hình ảnh (không căng nó)

Question

Ví dụ tôi có hình ảnh như vậy:

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

Theo kết quả tôi nhận được :

Nhưng chúng được kéo dài. Có cách nào để làm cho chúng tròn, nhưng không kéo dài? (Ví dụ, có một phần từ giữa, vv)

Fiddle:

http://jsfiddle.net/73h7try9/

Answer 1

Tôi khuyên bạn nên áp dụng các hình ảnh với background-image đến một div và sau đó áp dụng background-size: cover để đảm bảo tỉ số này vẫn đúng không phụ thuộc vào hình ảnh của kích thước/tỷ lệ ban đầu:

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

Answer 2

nếu bạn sử dụng jquery hơn kiểm tra này jsfiddle.: http://jsfiddle.net/73h7try9/2/

bạn js nên:

$('.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'); 
    } 
}) 

css của bạn nên:

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

html của bạn nên:

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