가로 세로 비율을 유지하면서 전체 이미지를 둥글게 만들기

Question

가로 세로 비율을 유지하면서 전체 이미지를 원 모양으로 자르거나 숨기지 않고 표시하려고합니다. CSS 만 사용하고 싶습니다.

나는 노력이 : 원 형태로 내 이미지를 표시 않지만 가로 세로 비율을 유지 나던

#propic 
{ 
width:150px; 
height:150px; 
background-size:cover; 
display:block; 
border-radius:100px; 
-webkit-border-radius:100px; 
-moz-border-radius:100px; 
} 

. 는 다시 I이 시도 :

종횡비를 유지 않지만, 형상은 타원형이된다

#propic 
{ 
width:150px; 
height:auto; 
background-size:cover; 
display:block; 
border-radius:100px; 
-webkit-border-radius:100px; 
-moz-border-radius:100px; 
} 

. 어떻게해야합니까?

미리 감사드립니다.

Answer 1

div가 원이므로 '가로 세로 비율 유지'가 의미하는 바가 완전히 명확하지 않습니다. 당신이 넓은 이미지의 가로 세로 비율을 유지하는 경우가이자를 수있는 대안으로 원

#propic { 
 
    width:150px; 
 
    height:150px; 
 
    border-radius:50%; 
 
    background-image: url(http://lorempixel.com/g/400/200/); 
 
    background-position: center; 
 
    background-size:100% auto; 
 
    background-repeat: no-repeat; 
 
}

<div id="propic"></div>

의 너비에 맞게 빈 영역의 상단과 하단이 될 것 이미지가 좌우 50 %`: 이미지가 여전히 100 %

background-size:auto 100%; 

JSfiddle 2nd Option