CSS border-radius를 이용해서 사각형 형태의 사진을 원형 사진으로 만들기

border-radius를 이용해서 사각형 형태의 사진을 원형 사진으로 만들기

프로필 사진 등을 보여줄 때 사각형 형태로 보여주기도 하지만 원형 사진 형태로 보여주는 경우가 많다. 사진을 원형으로 보여주고 싶을 때 border-radius 속성을 이용하게 되는데 이미지의 좀 더 자연스럽게 처리하기 위해 object-fit, object-position 속성도 함께 쓰기도 한다.

.circle-img {

    object-fit: cover;

    object-position: top; /*정사각형이 아니라 직사각형일 경우 원 안에 보여지게 할 중심 이미지의 위치를 지정*/

    border-radius: 50%;/*사각형의 모서리 둥근 정도를 지정하는 속성인데 50%를 지정하면 완전한 원이 됨*/

    width: 100px; 

    height: 100px;

}

object-fit

값	설명	비율
fill	지정한 가로,세로 크기에 꽉차게 지정	x
cover	지정한 가로,세로 크기에 꽉차게 지정	o
contain	지정한 가로,세로 중 큰쪽에 맞게 지정	o
scale-down	지정한 가로,세로 크기보다 원본이미지가 작으면 그대로 두고, 크면 원본이미지를 줄여서 보여줌	o
none	원본을 보여줌	o

<img src="flower.jpg" />

<img class="circle-img" src="flower.jpg" />

div  태그에 사진을 보여주고 싶으며 배경 이미지로 처리한다.

.circle-backround {

background-image:url(flower.jpg);

  background-size:100px 130px;

  background-repeat: no-repeat;

        border-radius: 50%;

        width: 100px;

        height: 100px;

}

<img src="flower.jpg" />

<div class="circle-backround"></div>