css 이미지 둥글게 / 프로필 사진 / 동그랗게 / 원모양 / border-radius

가로 세로 길이 달라도 상관 없음

body

<div class="profile-user-img"> 
          <img src="이미지링크" alt="profile-user-img" class="profile-user-img-img"> 
 </div>

 

css

<style>
  .profile-user-img{
    width: 70px;
    height: 70px;
    border-radius: 70%;
    overflow: hidden; 
  }

  .profile-user-img-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

</style>

profile-user-img의

border-radius : 둥글게 깎는 정도

overflow : 깎고 넘치는 부분을 hidden으로 안보이게 하기

 

 

요로콤 됨

border-radius 수치를 이용해서 모서리 둥글게를 조절할 수 있음

30% 정도 한 것