[css] 프로필 사진 / object-fit 이미지 비율

프로필 사진을 만들기 위해 img태그를 이용해 사진을 업로드했다. 

그런데 사진의 원본 비율이 무시되었다.... 

사진이 찌그러짐....

object-fit 속성은 img나 video요소와 같은 컨텐츠의 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정해주는 속성이다.

 

object-fit : fill 기본값

object-fit : fill  기본값

 

컨텐츠 박스의 크기에 맞춰 요소의 크기를 조절한다. ( 비율 유지X )

요소가 컨텐츠 박스를 가득 채우고 가로 세로 비율이 일치하지 않으면

박스를 가득 채우도록 요소가 확대된다.

 

 

 

object-fit : contain

 

요소의 가로 세로 비율을 유지하면서

요소가 컨텐츠 박스를 최대한 채우도록 크기를 확대한다. 

 

 

 

object-fit : cover

 

요소의 가로 세로 비율을 유지하면서 요소의 컨텐츠 박스를 가득 채운다.

요소의 일부가 잘려나갈수있다.

 

 

 

 

 

object-fit : none

 

요소의 크기를 조절하지 않는다. 

 

 

 

 

 

object-fit : scale-down

 

none과 contain 중 요소의 크기가 더 작아지는 값을 선택한다.