이야기앱 세상

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

IT/CSS

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

storya 2018. 12. 17. 20:14

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>



반응형
Comments