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