맨날 까먹어서 정리 해놓는다
object fit
<img>나<video>요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정
🔘 contain
가로세로비를 유지하면서, 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절
콘텐츠 박스 크기에 맞도록 하면서도 가로세로비를 유지하게 되므로, 서로의 가로세로비가 일치하지 않으면 객체가 "레터박스"처럼 됨
🔘 cover
콘텐츠의 가로세로비를 유지하면서, 요소 콘텐츠 박스를 가득 채움. 서로의 가로세로비가 일치하지 않으면 객체 일부가 잘려나감
🔘 fill
요소 콘텐츠 박스 크기에 맞춰 대체 콘텐츠의 크기를 조절. 콘텐츠가 콘텐츠 박스를 가득 채움
서로의 가로세로비가 일치하지 않으면 콘텐츠가 늘어남.
🔘 none
콘텐츠 크기 조절 X
🔘 scale-down
none과 contain중 콘텐츠의 크기가 더 작아지는 값을 선택
❗️주의 background image같은 경우에는 background-size라는 속성으로 조절해야함
