[프로젝트] 프로필 사진 변경하기, 프로필 사진 원에 맞춰서 등록하기

세미프로젝트에서 마이페이지 기능을 맡았다.

프로필 사진 원에 맞춰 수정하는 것과, js에서 change메소드를 넣어서 프로필 사진 바꿔보자.

 

imgfix라는 div안에 img에 id=imgArea 클래스를 넣어줬다.

input type=file에도 imgfile이라는 id값을 넣어줬다.

기존css는 imgfix사이즈를 200px로 맞춰줬다. 이 상태에서 사진을 올리게되면 이미지가 확대되어 깨지고, 원 모양이 아닌 정사각형 모양이다.

 

 

object-fit 값을 contain으로 주니 원본 사이즈가 div사이즈에 맞춰서 깨지지않게 들어가진다.

 

여기서 radius값을 70%를 주니까 완전한 원모양이 안된다 읭

object-fit 값을 cover로 하니 이미지 전체가 다 채워지며 이미지가 깨지지 않는 것을 확인할 수 있다.

 

이후 같은 화면에서 프로필을 계속 바꿀 수 있게 js에서 기능을 추가해준다.

수업 때 하던 것을 복사해왔는데 id값을 다 맞게 줬는데도 수정이 안되어서 30분 동안 같은 팀원 분이랑 뭐가 문젠가 했다..

알고보니 document.getElementById('imgArea').innerHTML로 되어있었다..ㅎㅎsrc로 바꿔주니 잘 됨

 

무튼, 이미지 바꾸기 해결 완료!!