HTML/CSS 이미지 둥글게 원 모양 (프로필)

네모난 이미지를 동그랗게 보여주는 방법에 대해서 알아볼거에요.

보통 프로필을 보여줄 때 많이 하죠.

 

예시 이미지는 이걸루 할게요.

가로가 좀더 기네요.

세로가 더 길어도 괜찬아요.

 

 

이해를 돕기 위해 직접적인 처리와 무관한 속성은 html 태그에 넣었어요.

 

<div class="box" style="background: #BDBDBD;">
    <img class="profile" src="/images/tistory.JPG">
</div>

 

.box {
    width: 150px;
    height: 150px; 
    border-radius: 70%;
    overflow: hidden;
}
.profile {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

 

테두리에 border-radius: 70%를 주면 div가 원이 되요.

overflow: hidden; 속성으로 넘치는 부분은 지워줬어요.

object-fit 속성으로 이미지와 같은 오브젝트를 받아서 비율은 그대로 유지한 채로 이미지를 가공할 수 있어요.

 

 

 

완전 원이 아니라 테두리만 살짝 둥글게 해주기도 하더라구요.

개인적으로 전 이게 더 좋더라구요.

border-radius를 30%로 줘볼게요.