원형 이미지 css html

보통의 이미지는 사각 박스인데

이처럼 대부분의 프로필은 원형 이미지를 가지고 있다

 

css

.box {
    width: 70px;
    height: 70px;
    border-radius: 70%;
    overflow: hidden;

}

.profile {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0px solid #000;
}

 

html

<div class="box" style="background: #BDBDBD;">
    <img class="profile" id="preview" src="">

 

 

 

불러온 사진이 꽉차게 원형 이미지를 만들수 있다.